滚动元素

Question

滚动几个像素后，使一些元素变得粘稠非常简单。但是，你会怎么做呢？

我想要一个元素是粘性的，但在滚动之后，例如400px（到原来的位置）它将保留在那里。

这里可以找到一个很好的例子http://ultrahd-3d-televize.heureka.cz

Answer 1

您可以通过jquery将位置更改为fixed和absolute来实现此目的 当你想要粘性移动时使用fixed，当它应该停止移动时使用absolute。你还应该设置粘性top以使其停在正确的位置：

var num = 400; //after num pixels, sticky doesn't move any more 

$(window).bind('scroll', function () {
  if ($(window).scrollTop() > num) {
       var top = $(window).height() + num; 
       $('.menu').css({"position":"absolute","bottom":"auto","top":top + "px"});
  } else {
       $('.menu').css({"position":"fixed","bottom":"0","top":"auto"})
  }
});

This Fiddle展示了如何实现这一目标。

Answer 2

我花了一段时间才能写出我的答案，因为我利用这个机会了解debouncing，以防止每次滚动时都会调用检查scroll的代码段。完成（理论上充斥着你的浏览器）。

JSFIDDLE

我的jQuery：

var menuHeight = $('.menu').height();
console.log(menuHeight);

var scrollingMachine = debounce(function() {
  var $this = $(this);

  if($(document).scrollTop() > (menuHeight - 850)) {
        console.log($(document).scrollTop() - 850);
        $('.stickypart').addClass('absolute');
    }
    else {
        $('.stickypart').removeClass('absolute');
    }
}, 100);

window.addEventListener('scroll', scrollingMachine);

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

去抖仅在滚动停止后调用函数，每100ms最多一次。 （如果您希望它更快地做出反应，只需将100更改为其他内容。）

最好去掉在滚动时触发的所有函数或者例如调整大小，以防止浏览器计算每个滚动或调整大小的像素，并且仅在用户完成滚动或调整大小时触发。它也可以用于打字或AJAX调用。特别是在AJAX调用的情况下，您只想在必要时触发一个函数，而不是每当用户从一个字母上抬起手指时。请参阅example here。