スクロールアップnavbarバックグラウンドフェードアウト

Question

スクロールアップするとき、navbarの背景がフェードアウトしたいです。 URL - http://wcsdedesign.com/play-brow-bar/index.php

ページを下にスクロールすると、navbarの背景がfadeIn効果でピンク色に変わります。ページを上にスクロールするときも同じようにしたいが、背景にはフェードアウト効果が必要です。 スクロールアップと同じことをどうすればできますか？できるだけ早くお勧めします。 以下は私のスクリプトコードです。

<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

使用このスクリプト：あなたはスクロールダウンしたときに

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

私が理解は、ナビゲーションエリアですbg-colorを白からピンクに変更してフェードインします。しかし、もう一度上にスクロールすると、bg-colorは突然白に戻り、フェーディング効果はありません。

あなたはCSS transitionプロパティであなたが試しているものを達成することができます。 CSSファイルに次のコードを追加します。上記のコードは何

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

はbackground-color変更は、遷移が.9s時間がかかるだろうと、あります。