How to change the color of the navigation bar when scrolling a page?

Question

I would like the navigation bar to be transparent, but when you scroll down the page, for example, it changes to red.

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

Answer 1

Something like that:

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

Answer 2

If someone is looking for a solution without jquery (vanilla js), here it is:

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

Answer 3

Solution by 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; } 

This should make your navigation transparent, and when you scroll it, it will change to rgba (34,34,34,0.9)