jquery - 滚动后光滑的粘性菜单

Question

这是我的 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 之后会有一个跳转。
然后我向 slider 添加了一个 margin-top 以获得流畅和更好的 Action 。
但在行动中仍然不顺利。

有什么建议吗？谢谢

Answer 1

出现此问题是因为您将上边距设置为 50 像素，而菜单实际上更高(接近 110 像素)。区别在于图像/内容的跳跃。如果将内容移动到与菜单高度相同的高度，则不会发生跳转。

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