使用航点从顶部窗口偏移的粘性 div答案

【问题标题】：Sticky div offset from top window using waypoint使用航点从顶部窗口偏移的粘性 div
【发布时间】：2012-12-18 00:03:06
【问题描述】：

我希望有人可以提供帮助。我绝不是程序员，我正在尝试学习如何创建与正常情况略有不同的粘性 div。这就是我想要实现的目标：

当 div #projectwrapper 向上滚动屏幕并距窗口顶部 150 像素时，当页面的其余部分滚动时，它应该停留在那里
向下滚动页面时，该 div 应返回到其在页面中的正常位置。

我一直在尝试演示和示例，我几乎可以让它工作。但它只会在它到达窗口的最顶部时被激活，并且它会粘在最顶部。但是我需要激活并坚持从顶部开始 150 像素。

这是我目前所拥有的。

$(document).ready(function() {
$('#projectwrapper').waypoint(function(event, direction) {
}, {
    offset: 150
}).find('#projectdescription').waypoint(function(event, direction){
    $(this).parent().toggleClass('sticky', direction === "down");
    event.stopPropagation();
});
});

【问题讨论】：

标签： javascript jquery offset sticky

【解决方案1】：

我没有使用航点。你可以使用一些简单的 jQuery：

 var projectWrapperPosition = $('#projectwrapper').position().top; //div position
  $(window).scroll(function() { //when window scrolls
    if($(window).scrollTop() > (projectWrapperPosition - 150)) //check if position of the window is 150px or smaller than the position of specified div has
     $('#projectwrapper').addClass('change-position'); //.change-position position fixed the div
     else
      $('#projectwrapper').removeClass('change-position');

  });

css:

.change-position {
  top:150px;
  position:fixed;
  width:100%;
  background:red;
}

查看演示：http://jsbin.com/uxizab/2/（滚动查看效果）

【讨论】：