滾動時固定側欄的計算

Question

我使用position絕對有一個側邊欄粘貼到父div的可見頂部。 例如。 父DIV位於整個屏幕的X：20％和Y：20％。 Inside Parent 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;
}