gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 00:36:13 25 4
gpt4 key购买 nike

当使用 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 像素内的行为是一样的。

最佳答案

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

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

关于javascript - jQuery 修复了在滚动时缩小到较小尺寸的导航栏是 super 马车,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54139601/

25 4 0