Question

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

当div #projectwrapper向上滚动屏幕，并且距离窗口顶部150px时，它应该粘住并保持在那里，而页面的其余部分滚动
当向下滚动页面时，div会在进入视图时返回到页面中的正常位置。

我一直在尝试演示和示例，我几乎可以让它工作。但它只会在窗口顶部被激活时才会被激活，它会粘在最顶端。但是我需要激活并坚持从顶部发生150px。

这是我到目前为止所做的。

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

Answer 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/（滚动查看效果）

Sticky div使用航点从顶部窗口偏移

1 个答案: