Question

I have a div which I want to become fixed at 20px from the top of the window when you scroll up and 40px from the footer when you get the bottom. My code seems inconstant, there must be a better way? Page Link

$(document).scroll(function () {
        if($(window).scrollTop() >= 345){
            $('#rightShipping').css({'position' : 'fixed', 'top' : '0px'});
        }
        if($(window).scrollTop() <= 346){
            $('#rightShipping').css({'position' : '', 'top' : ''});
        }
        console.log($(window).scrollTop());
    });

Answer 1

One quick idea – I would remove the .rightCol block, leaving only the #rightShipping one with top: 20px and it parent with position: relative. And then use this code:

$(document).scroll(function () {

    var scrollTop = $(window).scrollTop();

    var offsetTop = $('#rightShipping').offset().top;
    var positionTop = $('#rightShipping').position().top;

    if (scrollTop >= offsetTop - positionTop) {
        $('#rightShipping').css('position', 'fixed');
    } else {
        $('#rightShipping').css('position' : 'relative');
    }
});

I really don’t know if this will work, as I haven’t tested it and I need to get some sleep, but I hope it helps.

Good luck!