1

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

  • 当 div #projectwrapper 向上滚动屏幕并且距离窗口顶部 150px 时，它应该在页面的其余部分滚动时停留并停留在那里
  • 向下滚动页面时，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();
});
});
4

1 回答 1

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;
}

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

于 2012-12-23T11:34:42.293 回答