向下滚动页面时如何使导航栏改变颜色？

Posted 2023-04-12

【中文标题】向下滚动页面时如何使导航栏改变颜色？

【英文标题】：How to make navigation bar change color when you scroll down the page?

【发布时间】：2015-02-03 04:22:55

【问题描述】：

我希望导航栏是透明的，但是当您向下滚动页面时，它会变为红色。

<div class="nav">
      <div class="container">
       <div class="logo">
       <a href="#"><img src="RepublicSquare_logo.svg" style="height: 80px;"></a>
       </div>
        <div class="navMain">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
      </div>
    </div>

【参考方案1】：

类似这样的：

http://jsfiddle.net/qrhjdfmd/

var a = $(".nav").offset().top;

$(document).scroll(function()
    if($(this).scrollTop() > a)
       
       $('.nav').css("background":"red");
     else 
       $('.nav').css("background":"transparent");
    
);

【讨论】：

谢谢。你知道如何让它褪色而不仅仅是出现吗？

像这样添加 CSS 过渡属性：jsfiddle.net/qrhjdfmd。如果有用，请将我的答案标记为正确。

感谢您抽出宝贵时间回答问题。我使用了这个 - .nav transition-duration: 1s; 和这个 Jquery： $(document).ready(function() var scroll_start = 0; var startchange = $('.nav'); var offset = startchange .offset(); $(document).scroll(function() scroll_start = $(this).scrollTop(); if(scroll_start > offset.top) $('.nav').css('background-color ', 'rgba(34,34,34,0.9)'); else $('.nav').css('background-color', 'transparent'); ); );

抱歉，我无法投票赞成您的回答，它表示我的声誉没有 15。但我非常感谢您的时间和帮助。

抱歉，我发布了 jsfiddle 链接，但忘记保存更改。检查此链接：jsfiddle.net/qrhjdfmd/1

【参考方案2】：

如果有人要寻找非 jquery 解决方案（vanilla js），这里是：

document.addEventListener("DOMContentLoaded", function () 
    var scrollStart = 0;
    var nav = document.querySelector(".nav");
    var offset = navbarElement.getBoundingClientRect();

    document.onscroll = function (e) 
        scrollStart = e.target.scrollingElement.scrollTop;
        if (scrollStart > offset.top) 
            nav.style.background-color, rgba(34,34,34,0.9);
         else 
            nav.style.background-color = "transparent";
        
    ;
);

【参考方案3】：

OP 的解决方案。

jQuery

$(document).ready(function()       
   var scroll_start = 0;
   var startchange = $('.nav');
   var offset = startchange.offset();
   $(document).scroll(function()  
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) 
          $('.nav').css('background-color', 'rgba(34,34,34,0.9)');
        else 
          $('.nav').css('background-color', 'transparent');
       
   );
);

CSS

.nav 
transition-duration: 1s;

这应该使您的导航透明，并且当您滚动时它将更改为 rgba(34,34,34,0.9)