Search code examples
jqueryhtmlbackground-colorfadenav

Jquery animate navigation color

Hi I am making a website at the moment and am I having trouble with animating the navigation bar.

I would like the navigation bar to be transparent originally, than for it to change background-color after a certain div. I have done this but want the background-color to fade in, not just appear. Below is the HTML and Jquery.

How do I make it fade to the background-color?

HTML

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

Jquery

<script>

  $(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#c-title');
   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');
       }
   });
});
</script>

Thanks for taking the time to answer the question. (I hope the question is clear, if not let me know)

Solution

  • use this code in your css

    .nav{
    transition-duration: 2s;
}

    DEMO