जब आप पृष्ठ को स्क्रॉल करते हैं तो नेविगेशन बार कैसे रंग बदलते हैं?

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> 

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

Answer 2

अगर कोई एक गैर 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"; 
     } 
    }; 
}); 

Answer 3

ओपी द्वारा समाधान।

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

सीएसएस

.nav { 
transition-duration: 1s; 
} 

यह आपके नेविगेशन पारदर्शी बनाना चाहिए और जब आप स्क्रॉल यह RGBA के लिए बदल जाएगा (34,34,34,0.9)