滚动时固定侧栏的计算

Question

I am using position absolute to have a sidebar stick to the viewable top of a parent div. For example. Parent DIV is located at X:20% and Y:20% of the entire screen. Inside Parent Div I have a sidebar DIV positioned absolute that is set to Top:0 and Right:0.

As the parent div scrolls I increase the margin-top so that is always stays at the top of viewable area. I have been struggling with the calculation for this and just can't seem to get the difference between pageOffset, scollTop, etc. I have been thru w3schools and it still isn't making sense.

Here is the calculation I have so far but for some reason in IE the sidebar jumps. Any help would be greatly appreciated. Thanks in advance

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

If i understand correctly this should be a good example:

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

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

the styles:

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