当它到达容器 div 的末尾时，如何更改 div 上的 CSS“位置”？答案

【问题标题】：How to change CSS "position" on div when it reaches the end of container div?当它到达容器 div 的末尾时，如何更改 div 上的 CSS“位置”？
【发布时间】：2023-04-08 05:20:01
【问题描述】：

我正在为一个网站开发一项功能，该功能在包含社交分享按钮的单个帖子页面的左侧创建一个栏。当读者滚动时，该栏会跟随读者向下滚动。它与 Mashable.com 上的类似。

但是，该栏将继续向下滚动页面到网站的页脚区域，但我希望它在到达容器 div 的末尾（页眉和页脚之间的主页内容）时停止。

我猜想 JavaScript 涉及将“位置：固定”更改为“位置：绝对”，但我不确定确切的代码是什么。

有人有想法/可以帮助我吗？

【问题讨论】：

如果您没有得到答案，我将在明天发布，我已经两天了！ [....] 但是您基本上需要做的是将位置属性切换为静态（当加载页面或当 scrollTop 低于所需时），固定（当它到达所需的 scrollTop 位置时；对于例如，top:15px;) a 和 fixed (top:15px - $('#end').offset().top + $('#fixed_element).height() 当你想模拟固定条不是跟随scoll了）。快乐编码
你想要它在容器 div 中吗？
是的，我希望它在容器 div 中。我对 JavaScript 不是那么好，所以任何不是基本的东西都必须为我写出来。谢谢！

标签： javascript css position

【解决方案1】：

喜欢这个jsFiddle？

基本的jQuery是：

var stickerTop = parseInt($('#sticker').offset().top);
$(window).scroll(function() {
    $("#sticker").css((parseInt($(window).scrollTop()) + parseInt($("#sticker").css('margin-top')) > stickerTop) ? {
        position: 'fixed',
        top: '0px'
    } : {
        position: 'relative'
    });
});

【讨论】：

【解决方案2】：

jQuery 插件在保持在其容器内的同时尽可能保持在顶部，从而正确地做到了这一点：https://github.com/sebringj/jquery.dumbfixed

 $('#middle .right').dumbFixed();

所选项目对其父项进行了一些小的修改，例如将 min-width 和 min-height 设置为自己的尺寸，因为父项可能没有设置尺寸，并且将依赖其子项将其推送到自己的尺寸。

【讨论】：