如果向下滚动到屏幕上方，则会有一个div紧贴在屏幕顶部
如果向下滚动到屏幕上方，则会有一个div紧贴在屏幕顶部
提问于 2010-05-26 02:27:07
我有一个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
--------- ---------回答 3
Stack Overflow用户
回答已采纳
发布于 2010-05-26 03:37:29
诀窍是，您必须将其设置为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对象，现在速度更快了。
Stack Overflow用户
发布于 2011-07-22 17:42:41
让infinity的答案工作而不闪烁的诀窍是将滚动检查放在另一个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
Stack Overflow用户
发布于 2010-05-26 02:30:38
使用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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2907367
复制相关文章
相似问题
腾讯云开发者
