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

我有一个div，当我的页面第一次加载时，它的顶部大约为100px（它包含页面的一些按钮等）。如果向下滚动屏幕，请将div粘贴到屏幕顶部

当用户滚动过去它时，我想让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 
---------     ---------

来源

2010-05-25 Alex

136

诀窍是，你必须将它设置为位置：固定，但只有在用户滚动过去之后。

这与像这样做，附加处理程序的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的对象，快。

来源

2010-05-25 19:37:29 adamJLev

你使用复杂的jquery选择器来获取元素？这可能会导致闪烁。无论如何缓存在一个变种是一个好主意。 – adamJLev 2010-05-25 22:53:23

或者，您也可以不用追加div，而是调整跳转的元素的“margin-top”以匹配FIXED div的高度。 '$ stickyEl.next（）.css（'margin-top'，$ stickyEl.height（））' – adamJLev 2010-05-25 22:58:20

非常感谢！这是我需要的！完善。 – 2013-06-12 13:56:47

使用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>

来源

2010-05-25 18:30:37

不同意webdestroya，在我的回答中，至少在IE7/8，FFox 3.6，Safari 4和XP上的Chrome中，我没有看到太多的“滞后/追赶”。 http://perldoc.perl.org/perl.html – Andrew 2010-05-25 19:50:45

这并不回答这个问题。关键是在某些情况下没有固定。位于页面顶部时，距离顶部100像素。然后修复，一旦用户滑过它。这只是保持它整个时间固定。 – 2012-09-13 04:57:15

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

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

虽然我会推荐检查前面提到的源代码，因为它们确实处理了一些你可能不会马上想到的“陷阱”，比如点击锚链接时调整滚动位置。

来源

2010-05-25 19:31:34 Andrew

你应该尝试路点jQuery插件。

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

我认为这不正是你想要什么，并没有闪烁。但从内存来看，我认为它在Mobile Safari（YMMV）中效果不佳。

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

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

盒子图形页面不滚动到页面的顶部。

来源

2011-06-18 11:45:53

使无限的答案没有闪烁工作的诀窍是把滚动检查放在另一个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 '每个滚动事件的类。

现在，当sticky-anchor到达顶端时，它会添加粘性类，并在sticky-anchor返回到视图中时将其删除。

只需将一个空的div与类似于您想要修复的元素上方的锚点的类放置在一起。

像这样：

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

所有信用卡的代码去viixii.com

来源

2011-07-22 09:42:41 Rafvs

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

来源

2012-05-05 05:52:07 user1376350

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

回答

相关问题