javascript - jQuery 修复了在滚动时缩小到较小尺寸的导航栏是 super 马车

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;
}

我的预期结果是一个平滑滚动的固定导航栏，在滚动超过某个点后缩小到较小的尺寸。

实际发生的是，当您向下滚动超过某个点时，对于 20 像素的高度，它会变得 super 错误并开始上下弹跳。一旦你清除了这 20 像素左右，它就完全没问题了，但是当你向上滚动时，它在这 20 像素内的行为是一样的。

Answer 1

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

如果您能同时提供 HTML 标记和 CSS，将会很有帮助。