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

Question

我希望导航栏能够是透明的，但当你向下滚动页面时，它会变成红色等颜色。

<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>

- user3218008

Answer 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"});
    }
});

- KaMZaTa

---

谢谢你的回复。你知道怎么让它不仅仅是出现，还能渐变到颜色吗？ - user3218008

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

感谢您抽出时间回答问题。我使用了这个 - .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'); } }); }); - user3218008

抱歉，我无法为您的答案点赞，因为它显示我的声望值还不到15。但是我非常感谢您的时间和帮助。 - user3218008

抱歉，我发布了 jsfiddle 链接但是忘记保存更改了。请查看此链接：http://jsfiddle.net/qrhjdfmd/1/。 - KaMZaTa

Answer 2

如果有人想寻找非jQuery解决方案（纯javascript），这里提供一个解决方案：

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";
        }
    };
});

- jnaklaas

Answer 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)。

- Cœur