javascript - 当我在页面中间重新加载我的页面时，我的滚动导航栏返回到默认值

Question

当我在页面中间重新加载我的页面时，我的滚动导航栏返回默认值

Here is my website photos look here

我的 javascript 代码:

$(document).ready(function($){
    $(window).scroll(function(){
        $scrol = $(document).scrollTop();

         if ($scrol > 50 ) {
            $('.header').addClass('header6');
            $('.logo').addClass('logo5');
            $('.about').addClass('about5');
            $('.about:hover').addClass('about5:hover');
            $('.navbar').addClass('navbar5');
            $('.nav').addClass('nav5');
         }
        else{
            $('.header').removeClass('header6');
            $('.logo').removeClass('logo5');
            $('.about').removeClass('about5');
            $('.about:hover').removeClass('about5:hover');
            $('.navbar').removeClass('navbar5');
            $('.nav').removeClass('nav5');
        }
    });
});

我等待答案 谢谢你

Answer 1

只需在页面加载时运行您的函数以更新标题:

如@jeremy-thille 所述，我还添加了一些修改来优化您的代码

function updateScroll(obj){
    if ($(document).scrollTop() > 50 ) {
        obj.header.addClass('header6'); //Use the previously stored JQuery requests
        obj.logo.addClass('logo5');
        obj.about.addClass('about5');
        obj.navbar.addClass('navbar5');
        obj.nav.addClass('nav5');
    }
    else{
        obj.header.removeClass('header6');
        obj.logo.removeClass('logo5');
        obj.about.removeClass('about5');
        obj.navbar.removeClass('navbar5');
        obj.nav.removeClass('nav5');
    }
}

$(function(){ //New way to wait for the document to be loaded
    //Store JQuery calls to reduce processing time
    var storedObjects = {
        header: $('.header'),
        logo: $('.logo'),
        about: $('.about'),
        navbar: $('.navbar'),
        nav: $('.nav')
    };

    updateScroll(storedObjects); // Will update your header

    $(window).scroll(updateScroll(storedObjects));
});