如果向下滚过屏幕,请将div粘贴到屏幕顶部

Question

我有一个div,当我的页面第一次加载时,它从顶部约100px(它为页面保留一些按钮等).

当用户滚过它时,我希望div"跟随"用户,因为它附着在屏幕顶部.当用户返回页面顶部时,我希望它回到原始位置.

Visualization - xxxxx is the div:

Default (page load)          User vertically scrolled well past it
---------                    ---------
|       |                    |xxxxxxx| < after div reaches top of screen when
|xxxxxxx|                    |       |   page is scrolled vertically, it stays
|       |                    |       |   there
---------                    ---------

Answer 1

诀窍是你必须将它设置为position:fixed,但仅在用户滚过它之后.

这是通过这样的方式完成的,将处理程序附加到window.scroll事件

   // Cache selectors outside callback for performance. 
   var $window = $(window),
       $stickyEl = $('#the-sticky-div'),
       elTop = $stickyEl.offset().top;

   $window.scroll(function() {
        $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
    });

这只是sticky在页面滚过它时添加一个CSS类,并在它备份时删除该类.

CSS类看起来像这样

  #the-sticky-div.sticky {
     position: fixed;
     top: 0;
  }

编辑 - 修改代码来缓存jQuery对象,现在更快.

Answer 2

使无限的答案在没有闪烁的情况下工作的技巧是将滚动检查放在另一个div上,然后是你想要修复的div.

源于代码viixii.com使用我最终使用这个:

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top)
        $('#sticky-element').addClass('sticky');
    else
        $('#sticky-element').removeClass('sticky');
}

$(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

这样,只有在到达粘性锚点时才会调用该函数,因此不会删除并在每个滚动事件上添加".sticky"类.

现在它在粘性锚到达顶部时添加粘性类,并在粘性锚返回视图时将其删除.

只需在你想要修复的元素上方放置一个空类div,其类似于一个锚.

像这样:

<div id="sticky-anchor"></div>
<div id="sticky-element">Your sticky content</div>

代码的所有功劳都归viixii.com所有