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");

        }

    });

菜单通过此代码获得顶部修复。但是如果你仔细看到结果，那么在菜单得到修复后会有一个跳跃然后我在滑块上添加了margin-top以获得平滑且更好的动作但它仍然不是很顺畅的。

有什么建议吗？感谢

Answer 1

出现问题的原因是当菜单实际较高（接近110px）时，将上边距设置为50px。不同之处在于图像/内容的跳跃。如果移动内容的高度与菜单相同，则不会发生跳转。

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

滚动后平滑粘性菜单

1 个答案: