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

我希望导航栏是透明的，但当您向下滚动页面时，它会更改为红色。如何在向下滚动页面时使导航栏更改颜色？

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

来源

2014-12-05 user3218008

事情是这样的：

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

来源

2014-12-05 04:20:10 KaMZaTa

谢谢你。你知道如何让它淡入淡出不仅仅是出现？ – user3218008 2014-12-05 04:34:07

像这样添加CSS转换属性：http://jsfiddle.net/qrhjdfmd/。请将我的答案标记为正确，如果有用的话。 – KaMZaTa 2014-12-05 04:44:15

感谢您花时间回答问题。我用这个 - .nav {transition-duration：1s;}以及这个Jquery：$（document）.ready（function（）{var scroll_start = 0; var startchange = $（'。nav'）; var （scroll_start> offset.top）{（'。nav'）offset = startchange.offset（）; $（document）.scroll（function（）{ scroll_start = $（this）.scrollTop（）; if .css（'background-color'，'rgba（34,34,34,0.9）'）; } else {（'。nav'）.css（'background-color'，'transparent'）; } }）; }）; – user3218008 2014-12-05 06:20:41

如果有人要寻找一个非jQuery的解决方案（香草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"; 
     } 
    }; 
});

来源

2016-04-13 19:28:13 JKL

解决方案由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 ）

来源

2017-07-29 14:11:14

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

回答

相关问题