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

Question

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

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

使用 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")
   }
});

Answer 1

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

$(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();
}

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