On scrollen navbar background fadeout

Question

Ich möchte meine Navbar Hintergrund ausgeblendet werden, wenn Sie nach oben scrollen. URL - http://wcsdedesign.com/play-brow-bar/index.php

Wenn ich die Seite nach unten scrolle, wechselt der Hintergrund der Navigationsleiste zu rosa Farbe mit FadeIn Effekt. Ich möchte das gleiche, wenn ich die Seite nach oben scrollen, aber der Hintergrund muss einen Ausblendeffekt haben. Wie kann ich dasselbe wie Scroll-Up tun? Bitte schlagen Sie so bald wie möglich vor. Unten ist mein Skriptcode.

<nav class="navbar navbar-inverse navbar-fixed-top row "> 
     <div class="container"> 
      <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span>       
      </button> 

      <a class="navbar-brand" href="index.php"><img src="images/logo.png"></a><br> 
      <span class="scroll-bg mob-phne glyphicon fa fa-phone cnt-num" style="font-size:20px !important; margin-top: 10px; left: -4%;  color: #000;">&nbsp;03 9041 6582</span> 

      </div><!--navbar-header--> 

      <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav"> 
       <li class="menus"><a class="scroll-bg" href="index.php">Home</a></li> 
       <li class="menus"><a class="scroll-bg" href="services.php">Services</a></li> 
       <li class="menus"><a class="scroll-bg" href="#">Gallery</a></li> 
       <li class="menus"><a class="scroll-bg" href="about-us.php">About Us</a></li> 
       <li class="menus"><a class="scroll-bg" href="contact.php">Our Locations</a></li> 
       <li class="menus"><a class="scroll-bg" href="#">Book Now!</a></li> 
       <li class="menus"><a class="scroll-bg" href="specials.php">Specials</a></li> 
       <li class="menus"><a class="scroll-bg" href="blog.php">Blog</a></li> 
      </ul> 
      <ul class="nav navbar-nav social-icons-header"> 
       <li><a class="scroll-bg" href="#"><span class="glyphicon fa fa-facebook"></span></a></li> 
       <li><a class="scroll-bg" href="#"><span class="glyphicon fa fa-twitter"></span></a></li> 
       <li><a class="scroll-bg" href="#"><span class="glyphicon fa fa-instagram"></span></a></li> 
       <li><a class="scroll-bg" href="#"><span class="glyphicon fa fa-envelope"></span></a></li> 
      </ul> 
      </div> 

      </div><!--cointainer--> 
    </nav><!--navigation--> 

<script type="text/javascript"> 
    var navbarVisible = false; 
    $(window).scroll(function(){ 
     if ($(this).scrollTop() >= 1) { 
      $(".navbar-fixed-top").css("background-color", "#cc2c96"); 
       if (!navbarVisible) { 
         $("nav").addClass("navbar-fixed-top") 
         .hide() 
         .fadeTo(900, 0.9); 
         navbarVisible = true;}; 
      } else { 
      $(".navbar-fixed-top").css("background-color", "transparent"); 
      $("nav").addClass("navbar-fixed-top"); 
       navbarVisible = `false; }` 
      }); 
</script> 

Answer 1

Verwenden Sie dieses Skript:

$(document).ready(function() { 
      // grab the initial top offset of the navigation 
      var stickyNavTop = $('.nav').offset().top; 

      // our function that decides weather the navigation bar should have "fixed" css position or not. 
      var stickyNav = function(){ 
       var scrollTop = $(window).scrollTop(); // our current vertical position from the top 

       // if we've scrolled more than the navigation, change its position to fixed to stick to top, 
       // otherwise change it back to relative 
       if (scrollTop > stickyNavTop) { 
        $('.nav').addClass('sticky'); 
       } else { 
        $('.nav').removeClass('sticky'); 
       } 
      }; 

      stickyNav(); 
      // and run it again every time you scroll 
      $(window).scroll(function() { 
       stickyNav(); 
      }); 
}); 

https://jsfiddle.net/hardyrajput/uf0626jb/3/

Answer 2

Was ich verstehe, ist, wenn Sie nach unten scrollen, der Bereich nav ändere die bg-Farbe von weiß nach pink mit einem Einblendeffekt. Wenn Sie jedoch erneut nach oben scrollen, wird die bg-Farbe plötzlich wieder weiß, ohne zu verblassen.

Sie können erreichen, was Sie mit CSS transition Eigenschaft versuchen. Fügen Sie den folgenden Code in Ihre CSS-Datei ein.

.navbar-fixed-top{ 
    transition: background-color .9s; 
} 

Was die oben genannten Code tut, ist, wenn die background-color ändert, wird der Übergang .9s Zeit in Anspruch nehmen.