Search code examples
jqueryhtmlcsssticky

stick div is jumping when viewed on mobile

The #main-categories div is jumping, and not smoothly sticking on top when viewed on mobile. What could have been the problem?

Here's the code I got:

var s = $("#main-categories");
var pos = s.position();
$(window).scroll(function() {
    var windowpos = $(window).scrollTop();

    if (windowpos >= pos.top) {
        s.addClass("stick");
    } else {
        s.removeClass("stick");
    }
});

Sample jsfiddle: https://jsfiddle.net/o1rrwwp0/

Thanks a lot!

Solution

  • I believe the issue can be fixed if you replace:

    .stick {top:50px;}

    with:

    .stick {top:0;}