jQuery固定的导航栏在滚动时缩小到较小的大小，这是超级越野车

Question

当使用jQuery和CSS的组合来触发我的导航栏在滚动时缩小时，当您滚动回某个位置时，它会出现越野车的问题，我以一个视频链接为例。

我尝试了两种不同的方法。 第一种是将$（window）.scrollTop）与if语句以及一系列.addClass和.removeClass一起使用。 我尝试的第二件事是将$（window）.scrollTop）与一系列.css动态样式修改一起使用。 这两种尝试都呈现与该视频https://youtu.be/YXKsrL1cghs中显示的相同的最终结果。

我的第一个jQuery尝试：

$(document).ready(function () {
    $(window).on("scroll", function () {
        if ($(window).scrollTop() >= 40) {
            $(".navbar").removeClass("py-5");
            $(".navbar").addClass("compressed");
        } else {
            $(".navbar").addClass("py-5");
            $(".navbar").removeClass("compressed");
        }
    });
});

我的第二次jQuery尝试：

$(document).ready(function () {
    $(window).on("scroll", function () {
        if ($(window).scrollTop() >= 40) {
            $(".navbar").css({ "padding-top": "10px" });
            $(".navbar").css({ "padding-bottom": "10px" });
        } else {
            $(".navbar").css({ "padding-top": "3rem" });
            $(".navbar").css({ "padding-bottom": "3rem" });
        }
    });
});

我的CSS：

.navbar.compressed {
    padding-top: 10px;
    padding-bottom: 10px;
}

我的预期结果将是平滑滚动的固定导航栏，滚动到特定点后会缩小到较小的大小。

实际发生的情况是，当您向下滚动超过某个点时，对于20px的高度，它会变成超级越野车，并开始上下反弹。 一旦清除了20像素左右，就完全可以了，但是当您向上滚动时，在20像素内的行为相同。

Answer 1

观看视频时，我注意到您的.navbar已transition: all .3s 。 这可能是当您删除py-5类并添加compressed类时，它两次触发转换的原因。

如果您还可以提供HTML标记和CSS，将很有帮助。

Answer 2

该脚本对DOM的操作很多。 我不确定这是否可以解决您的问题，但是如果尚未应用，请仅更改类可能是个好主意。

 $(document).ready(function() { $(window).on("scroll", function() { let navbar = $(".navbar"); if ($(window).scrollTop() >= 40) { if (navbar.hasClass("py-5")) { navbar.removeClass("py-5"); navbar.addClass("compressed"); } } else { if (navbar.hasClass("compressed")) { navbar.addClass("py-5"); navbar.removeClass("compressed"); } } }); });

 body { height: 10000px; position: relative; } .navbar { width: 100%; position: fixed; height: 50px; top: 0; transition: all .3s } .py-5 { background-color: blue; padding-top: 10px; padding-bottom: 10px; } .compressed { background-color: red; padding-top: 0px; padding-bottom: 0px; }

 <html> <head></head> <body> <nav class="navbar py-5">Navigation</nav> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> </html>

jQuery固定的导航栏在滚动时缩小到较小的大小，这是超级越野车

问题描述

2 个解决方案

解决方案1
0 2019-01-11 04:22:26

解决方案2
0 2019-01-11 05:08:37

jQuery固定的导航栏在滚动时缩小到较小的大小，这是超级越野车

问题描述

2 个解决方案

解决方案1 0 2019-01-11 04:22:26

解决方案2 0 2019-01-11 05:08:37

解决方案1
0 2019-01-11 04:22:26

解决方案2
0 2019-01-11 05:08:37