如何在页面重新加载超过 10 像素时激活颜色更改导航

Posted 2023-05-08

【中文标题】如何在页面重新加载超过 10 像素时激活颜色更改导航

【英文标题】：How to activate color changing navigation on page reload past 10px

【发布时间】：2021-11-25 13:19:42

【问题描述】：

我有一个导航，当滚动超过 10 像素时，它会改变背景颜色等。 但如果我停留在 10 像素以上并刷新页面，它会恢复为透明背景，直到我开始滚动页面。

当页面刷新超过 10px 时如何使该功能起作用？

代码：

 window.onload = scrollNavi;

function scrollNavi() 

  $(window).scroll(function () 
      var scroll = $(window).scrollTop();
      if (scroll > 10) 
        $(".navbar").css( "background-color": "white", "box-shadow": "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px" );
        $(".nav-item").css("color", "#707070");
        $(".logo").attr("src", "/images/logo/ccc-logo-new.png");
        $(".navi-icon").css("color", "#707070");
      

      else 
        $(".navbar").css( "background": "none", "box-shadow": "none" );
        $(".nav-item").css("color", "white");
        $(".logo").attr("src", "/images/logo/ccc-logo-hvid.png");
        $(".navi-icon").css("color", "white");
      
    );
;

正如你上面所说，我尝试使用 window.onload 激活它，但这似乎没有帮助。

导航：

<nav class="navbar fixed-top navbar-expand-xl navbar-light">
  <div class="container-fluid">
   <a class="navbar-brand" href="/">
    <img class="logo" src="/images/logo/ccc-logo-hvid.png"  >
   </a>
   <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs- 
   target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria- 
   expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav">
     <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
     </li>
     <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
     </li>
    </ul>
   </div>
  </div>
</nav>

【参考方案1】：

当调用scrollNavi() 时，您所做的只是为 scroll javascript 事件注册一个事件处理程序。 您应该做的是将滚动事件处理程序存储在一个函数中并在页面加载时调用它。

function scrollNavi() 
    var scroll = $(window).scrollTop();
    if (scroll > 10) 
      $(".navbar").css( "background-color": "white", "box-shadow": "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px" );
      $(".nav-item").css("color", "#707070");
      $(".logo").attr("src", "/images/logo/ccc-logo-new.png");
      $(".navi-icon").css("color", "#707070");
    

    else 
      $(".navbar").css( "background": "none", "box-shadow": "none" );
      $(".nav-item").css("color", "white");
      $(".logo").attr("src", "/images/logo/ccc-logo-hvid.png");
      $(".navi-icon").css("color", "white");
    
;
window.onload = scrollNavi;
$(window).scroll(scrollNavi);