javascript - 滚动时固定边栏的计算

Question

我使用绝对位置让侧边栏贴在父 div 的可视顶部。例如。父 DIV 位于整个屏幕的 X:20% 和 Y:20%。在父 Div 内部，我有一个绝对定位的侧边栏 DIV，它设置为 Top:0 和 Right:0。

随着父 div 的滚动，我增加了 margin-top 以便始终保持在可视区域的顶部。我一直在为这个计算而苦苦挣扎，似乎无法区分 pageOffset、scollTop 等。我已经通过 w3schools，它仍然没有意义。

这是我到目前为止的计算结果，但出于某种原因，在 IE 中边栏会跳转。任何帮助将不胜感激。提前致谢

var s = $(".sidebar");
var pos = s.position();
$(window).scroll(function () {
    var windowpos = $(window).scrollTop();
    (windowpos >= 270) ? s.css("marginTop", Math.floor($(window).scrollTop() - 270) + "px") : s.css("marginTop", 0);
});

Answer 1

如果我理解正确，这应该是一个很好的例子:

var s = $(".sidebar");
var pos = s.offset().top;

    $(window).scroll(function () {
        if ($(window).scrollTop() >= pos) {
            s.addClass('new-styles');
        } else {
            s.removeClass('new-styles');
        }
    });

样式:

.sidebar {
    position: absolute; // or relative
    top: 100px;
}
.new-styles {
    position: fixed;
    top: 0;
}