CODEWITHSUNDEEP
jqueryhtmlcss
Sadeghbayan
Sadeghbayan

Reputation: 1163

Smooth sticky menu after scroll

Here's my fiddle .

$(document).scroll(function () {
        var y = $(this).scrollTop();
        if (y > 110) {
            $('.menu-container').addClass( "fix-menu" );
              $(".slider").css("margin-top", "50px");

        } else {
            $('.menu-container').removeClass("fix-menu");
            $(".slider").css("margin-top", "0px");
          
        }

    });

menu get fix at the top by this code . but if you see the result carefully there's a jump after menu get fix .
then i added a margin-top to slider to have smooth and better action .
but still it's not smooth in acion .

Any advice ? Thanks

Upvotes: 1

Views: 3448

Answers (1)

BobbyTables
BobbyTables

Reputation: 4685

The problem occurs because you set the top margin to 50px, when the menu is actually higher (closer to 110px). The difference is the jump of the image/content. If you move the content the same height as the menu is high, no jump occurs.

$(".slider").css("margin-top", "110px");

Upvotes: 1

Related Questions