Question

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

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

我猜JavaScript涉及到将“position：fixed”更改为“position：absolute”，但我不确定具体代码是什么。

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

Answer 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'
    });
});

Answer 2

jQuery插件在保留在其容器内时可以正常地执行此操作，同时尽可能保持在顶部：https://github.com/sebringj/jquery.dumbfixed

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

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

如何在div到达容器div的末尾时更改CSS的“位置”？

2 个答案: