gpt4 book ai didi

javascript - 页面重新加载后重置导航栏状态

转载 作者:太空宇宙 更新时间:2023-11-04 08:43:47 28 4
gpt4 key购买 nike

关于刷新页面的非常基本的问题(我认为)。

所以我有一个固定的导航栏,它可以调整大小和更改颜色,并在您向下滚动时执行各种奇特的操作。问题是,当您刷新页面时,即使您仍在向下滚动,导航栏也会“刷新”,它看起来就像您位于页面顶部时一样。

使用 jQuery 2.x 这是我得到的:

$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
$('#enquire-btn').addClass('btn-shrink');
$('#logo').css("max-height", "70px")
$('#logo-link').css("padding-top", "7px")
} else {
$('nav').removeClass('shrink');
$('#enquire-btn').removeClass('btn-shrink');
$('#logo').css("max-height", "100px")
$('#logo-link').css("padding-top", "15px")
}
});

最佳答案

我认为问题在于此功能仅在滚动时触发。当您重新加载页面时,该函数从未被调用过。您可以尝试将其更改为这样的内容:

$(window).scroll(ScrollChange);
function ScrollChange(){
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
$('#enquire-btn').addClass('btn-shrink');
$('#logo').css("max-height", "70px")
$('#logo-link').css("padding-top", "7px")
} else {
$('nav').removeClass('shrink');
$('#enquire-btn').removeClass('btn-shrink');
$('#logo').css("max-height", "100px")
$('#logo-link').css("padding-top", "15px")
}
}

$( document ).ready(function() {
ScrollChange();
}

这样您的函数也会在页面加载时触发。

关于javascript - 页面重新加载后重置导航栏状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43921472/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com