Question

当我滚动时，我的导航标题从透明变为纯色，并且它的效果非常好。但每当我刷新我的页面中途时，我的导航标题丢失了它的属性，似乎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');
       }
   });

});

Answer 1

您可以将状态保存在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
       }
   });

Answer 2

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

$(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上设置它，但这应该会在页面加载时触发您的滚动功能，无论浏览器放在哪里用户刷新。

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

2 个答案: