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

EDIT-用于缓存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

Answer 3

你应该尝试使用waypoints jQuery插件。

http://imakewebthings.com/waypoints/shortcuts/sticky-elements/

我认为它完全符合您的要求，并且没有闪烁。但是，从内存来看，我不认为它在Mobile Safari（YMMV）中运行良好。

最近在“纽约时报”上就是一个很好的例子：

http://www.nytimes.com/interactive/2010/11/13/weekinreview/deficits-graphic.html

页面中的方框图形不会滚动到页面顶部。

Answer 4

有一个previous question today（没有答案）给了good example of this functionality。您可以查看relevant source code for specifics（搜索“工具栏”），但基本上它们使用了webdestroya的解决方案和一些JavaScript的组合：

页面加载和元素是位置：静态
在滚动时，测量位置，如果元素是位置：静态并且它离开页面，那么元素将被翻转到位置：固定。

我建议检查前面提到的源代码，因为它们确实处理了一些您可能不会立即想到的“陷阱”，例如在单击锚链接时调整滚动位置。

Answer 5

我为此创建了一个jQuery插件。很想得到一些反馈，因为这是我的第一个。 https://github.com/dubroe/sticky-div

Answer 6

使用position:fixed;并设置top:0;left:0;right:0;height:100px;，您应该能够“坚持”到页面顶部。

<div style="position:fixed;top:0;left:0;right:0;height:100px;">Some buttons</div>

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

6 个答案: