滚动时固定/浮动的div元素

Posted 2023-05-08

【中文标题】滚动时固定/浮动的div元素

【英文标题】：fixed/floating div element when scrolling

【发布时间】：2011-12-05 19:21:58

【问题描述】：

我正在尝试在网络上搜索此内容，但我不确定要查找的具体内容。我试图找出如何创建一个将被固定的 div 元素，或者仅当元素的 TOP 到达窗口浏览器视图的 TOP 时才浮动。例如，如果一个元素位于页面的一半，当您继续向下滚动时，该元素将一直保持不变，直到它即将消失，然后它会希望保持在我的浏览器顶部（固定）。

【问题讨论】：

你需要gmails浮动工具栏之类的东西吗？？？

【参考方案1】：

我想我正在做一些类似于你想做的事情。试试下面的代码，把你需要的任何东西放在通知 div 中，不要管锚一个。

<div id="notification-anchor"></div>
<div id="notification"></div>

<script type="text/javascript"> 
    $(function() 
        var a = function() 
            var b = $(window).scrollTop();
            var d = $("#notification-anchor").offset().top;
            var c = $("#notification");
            if (b > d) 
                c.css(position:"fixed",top:"0px")
             else 
                c.css(position:"absolute",top:"")
            
        ;
        $(window).scroll(a);a()
    );
</script> 

编辑：你应该注意，如果这对你来说不是很明显，这需要你包含 JQuery。

【讨论】：

哦，哇，它的工作原理！谢谢！我想知道，有没有办法让它更流畅？如果你快速滚动，它会有一点抖动。

是的，您会出现抖动，因为当您滚动图像（或任何图像）并且它移过顶部时，它会在修复之前显示片刻。您必须为滚动编写一个事件处理程序来检查它以摆脱它，但我不确定在哪里指向您。有一个名为 mousewheel 的 JQuery 模块可能会有所帮助...

非常感谢。但也许如果你有时间，你也许可以回答我的另一个问题？而不是 $(window).scrollTop()，我在顶部有一个标题横幅，距离浏览器顶部 40px，当它到达我的 div 底部时，如何让它滚动？非常感谢！