如果我滚动并刷新我的网页，我的导航标题会失去其属性.JQuery

If I scroll and refresh my webpage, my nav header loses its properties. JQuery

本文关键字：我的 标题 失去 JQuery 属性 导航 滚动 刷新 网页 如果      更新时间：2023-09-26

当我滚动时，我的导航标题从透明变为纯色，它工作得很好。但是每当我中途刷新页面时，我的导航标题都会失去其属性，并且似乎 jquery 会重置并且我的导航标头恢复为透明。我希望它保持纯色，如果我刷新我的页面并且我在页面的一半。

$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('.header');
   var offset = startchange.offset();
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $('.header').css('background-color', '#111417');
       } else {
          $('.header').css('background-color', 'transparent');
       }
   });
});

您可以将状态保存在 cookie 中，每当页面刷新时，从 cookie 中读取状态并设置适当的 css 或类。

 $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $('.header').css('background-color', '#111417');
           //here save the cookie for example class or the css
       } else {
          $('.header').css('background-color', 'transparent');
           //here save the cookie
       }
   });

在文档就绪中，只需触发事件，如下所示：

$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('.header');
   var offset = startchange.offset();
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $('.header').css('background-color', '#111417');
       } else {
          $('.header').css('background-color', 'transparent');
       }
   });
   $(document).trigger("scroll");
});

您可能需要在四分之一秒的触发命令上设置一个简短的 setTimeout，或者甚至可以在 window.load 上执行此操作，但这应该触发您的滚动功能在页面加载时发生，无论浏览器将用户置于何处刷新。

相关文章：