Question

I am using the following to fix a div to almost the top of a page, when the page is scrolled, however, i want to stop it 60px before it reaches the top.

At the moment it goes all the way to the top, then jumps back down 60px which is messy!

function moveScroller() {
        var move = function() {
            var st = $(window).scrollTop();
            var ot = $("#scroller-anchor").offset().top;
            var s = $("#scroller");
            if(st > ot) {
                s.css({
                    position: "fixed",
                    top: "60px"
                });
            } else {
                if(st <= ot) {
                    s.css({
                        position: "relative",
                        top: ""
                    });
                }
            }
        };
        $(window).scroll(move);
        move();
    }

    $(function() {
        moveScroller();
    });

Here’s a fiddle to see: JSFiddle

Can this be done?

Answer 1

I adjusted the condition, when you change the element-position to “fixed”. For me it works now:

$(document).ready(function() {

    function moveScroller() {
        var move = function() {
            var st = $(window).scrollTop();
            var ot = $("#scroller-anchor").offset().top;
            var s = $("#scroller");
            var marginTop = 60;

            if((st+marginTop) > ot) {
                s.css({
                    position: "fixed",
                    top: marginTop + "px"
                });
            } else {
                if(st <= ot) {
                    s.css({
                        position: "relative",
                        top: ""
                    });
                }
            }
        };
        $(window).scroll(move);
        move();
    }

    $(function() {
        moveScroller();
    });

});