如果向下滚动通过它,则有一个 div 紧贴屏幕顶部

IT技术 javascript html css
2021-01-21 13:57:27

我有一个 div,当我的页面第一次加载时,它离顶部大约 100 像素(它包含页面的一些按钮等)。

当用户滚动通过它时,我希望 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
---------                    ---------
4个回答

诀窍是你必须将它设置为 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 对象,现在速度更快。

最初的问题并不以 jQuery 的使用为前提。
2021-03-23 13:57:27
您是否使用复杂的 jquery 选择器来获取元素?这可能会导致闪烁。无论如何,将它缓存在 var 中是一个好主意。
2021-03-31 13:57:27
对于在 div 粘住时无缝向下滚动的响应式解决方案(没有剩余的内容向上跳),在粘住 div 的不同设备中调整到可变高度,我执行了以下操作:#replaceDiv在粘住 div 之前添加空div,它在粘滞事件中替换了确切的粘贴 div 的高度。$window.scroll运行,请检查 div 是否粘连,如果是,则给出#replaceDiv与粘连 div 相同的当前高度:if ($window.scrollTop() > elTop) $('#replaceDiv').height($('#cartBar').outerHeight()); else $('#replaceDiv').height(0);
2021-04-06 13:57:27
非常感谢你!这就是我需要的!完美的。
2021-04-10 13:57:27
或者,除了附加 div 之外,您还可以调整margin-top正在跳跃的元素的 ,以匹配 FIXED div 的高度。例如$stickyEl.next().css('margin-top', $stickyEl.height())
2021-04-14 13:57:27

使无穷大的答案在没有闪烁的情况下工作的技巧是将滚动检查放在另一个 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 的作用就像一个锚点。

像这样:

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

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

今天有一个以前的问题(没有答案)给出了这个功能的一个很好的例子您可以查看相关的源代码以了解详细信息(搜索“工具栏”),但基本上它们结合使用了 webdestroya 的解决方案和一些 JavaScript:

  1. 页面加载和元素位置:静态
  2. 在滚动时,测量位置,如果元素是 position: static 并且它不在页面上,那么元素将翻转到 position: fixed。

不过,我建议检查上述源代码,因为它们确实处理了一些您可能不会立即想到的“问题”,例如在单击锚链接时调整滚动位置。

使用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>
不同意 webdestroya,我在回答中给出的示例中没有看到太多“滞后/追赶”,至少在 XP PC 上的 IE7/8、FFox 3.6、Safari 4 和 Chrome 中。 perldoc.perl.org/perl.html
2021-04-02 13:57:27
这不能回答问题。重点是在某些情况下不要修复它。在页面顶部时,距顶部 100 像素。然后固定,一旦用户向下滚动通过它。这只是让它一直保持固定。
2021-04-06 13:57:27