JS上的粘滞块

Question

你好
我想用这个脚本做一个粘性块

 $(window).scroll(function() {
var sb_m = 80; /* top and bottom padding */
var mb = 300; /* footer height with a margin */
var st = $(window).scrollTop();
var sb = $(".loginform");
var sbi = $(".loginform #loginform");
var sb_ot = sb.offset().top;
var sbi_ot = sbi.offset().top;
var sb_h = sb.height();

if(sb_h + $(document).scrollTop() + sb_m + mb < $(document).height()) {
    if(st > sb_ot) {
        var h = Math.round(st - sb_ot) + sb_m;
        sb.css({"paddingTop" : h});
    }
    else {
        sb.css({"paddingTop" : 0});
    }
}
});

裸 HTML all work fine
如果向站点添加脚本（使用 wordpress）出现无限滚动
here can see problem
如果通过小部件将元素添加到页脚，则会出现问题
请告诉我有什么问题？

Answer 1

老实说，使用 padding-top 并不理想，您应该使用 top（将元素设置为位置：相对或绝对）；

如果你不关心是否支持 IE，最简单的方法是使用 position:sticky;它为您完成所有工作：https://developer.mozilla.org/en-US/docs/Web/CSS/position

如果您更喜欢自己做，我建议您这样做：

1. 将即将成为粘性元素的当前 offset().top 和 .left 存储在变量中，在任何 onScroll 处理程序之外。
2. 当此条件为真时：

$(window.scrollTop() >= theElementOffsetTopValueYouStored)

将元素设置为 position: fixed 并设置 left: 和 top: 元素的属性，这些属性应该与您之前存储的值保持一致。然后添加您的条件以确保它在到达文档末尾时停止，检查 element.offset().top + element.height > document.height

请认为这是凭记忆进行的，您可能需要在这里和那里进行一些调整以使其正常工作。