bootstrap 3 navigazione fissa personalizzata su scroll con effetto dissolvenza

Question

Sto provando a svanire nella barra di navigazione e bastone sulla parte superiore mentre si scorre alla fine della pagina. Il suo effetto dissolvenza funziona solo la prima volta. Il mio codice è sotto

<style type="text/css"> 
    .navOpacity{ 
     opacity: 0; 
    }  
    </style> 

    <script type="text/javascript"> 
    $(document).ready(function(){ 

    $(window).scroll(function(){ 

     var ht = $('header').height()+70; 

     if($(this).scrollTop() >= ht){ 
      $("#navb").addClass("navbar-fixed-top navOpacity") 
      .fadeTo('slow','1'); 
      $(".row:first").css("padding-top","50px"); 
     }else{ 
      $("#navb").removeClass("navbar-fixed-top navOpacity"); 
      $(".row:first").css("padding-top","0px"); 
     } 

    }); 

    }); 

    </script> 

    <div class="container"> 

     <header class="page-header"> 
     <h1>Hello world</h1> 
     </header> 

     <nav id="navb" class="navbar navbar-default"> 

     <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="#">WebSiteName</a> 
     </div> 

     <div class="collapse navbar-collapse" id="myNavbar"> 

      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li class="dropdown"> 
       <a class="dropdown-toggle" 
        data-toggle="dropdown" href="#">Page 1 
        <span class="caret"></span> 
       </a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">Page 1-1</a></li> 
       <li><a href="#">Page 1-2</a></li> 
       <li><a href="#">Page 1-3</a></li> 
       </ul> 
       </li> 
      <li><a href="#">Page 2</a></li> 
      <li><a href="#">Page 3</a></li> 
      </ul> 

      </div> 

    </nav> 

    <div class="row"> 

     <div class="col-md-4"> 
     <h3>h1. Bootstrap heading</h3> 
     Hello world and Mario. 
     </div> 

     <div class="col-md-4"> 
     <h3>h2. Bootstrap heading</h3> 
     Hello world and Mario. 
     </div> 

     <div class="col-md-4"> 
     <h3>h3. Bootstrap heading</h3> 
     Hello world and Mario. 
     <img src="rsz_myimg.jpg" class="img-responsive" /> 
     </div> 

    </div><!-- end or row class--> 
</div><!-- end container class--> 

Answer 1

Il tuo problema è che dopo la prima volta fadeTo viene eseguito, il vostro elemento è lasciato con un attributo style="opacity: 1", che è rimasto lì. Quindi devi rimuoverlo quando scorri verso l'alto.

Ho anche cambiato il modo in cui la barra di navigazione è nascosta, suggerisco di utilizzare .hide(), perché utilizza anche l'attributo style degli elementi, in questo modo non verrà sovrascritto. E c'è anche una variabile navbarVisible che viene utilizzata per determinare se la barra di navigazione è già sbiadita e, in caso affermativo, il codice per dissolverlo non viene eseguito quando non è necessario. Questo dovrebbe essere un piccolo passo in avanti nelle prestazioni.

Questo sembra funzionare bene:

<script type="text/javascript"> 
    $(document).ready(function(){ 

     var navbarVisible = false; 

     $(window).scroll(function(){ 

      var ht = $('header').height()+70; 

      if ($(this).scrollTop() >= ht) { 

       if (!navbarVisible) { 
        $("#navb").addClass("navbar-fixed-top") 
         .hide() 
         .fadeTo('slow','1'); 

        $(".row:first").css("padding-top","50px"); 
        navbarVisible = true; 
       }; 
      } else { 
       $("#navb").removeClass("navbar-fixed-top").removeAttr('style'); 
       $(".row:first").css("padding-top","0px"); 
       navbarVisible = false; 
      } 

     }); 
    }); 
</script> 

È non lo fanno bisogno di questa parte più:

<style type="text/css"> 
    .navOpacity{ 
     opacity: 0; 
    }  
</style> 

Ecco un link ad un esempio JSFiddle con il codice di lavoro: JSFiddle Link

Answer 2

I miei due centesimi ...

Basta aggiungere questo Javascript e via. Attualmente configurato per diplomarsi oltre il primo 200 px di scroll.

var scrollFadePixels = 200; 

var fadeNavbar = function (window) 
{ 
    var opacity = window.scrollTop()/scrollFadePixels; 
    $('.navbar-fixed-top').css('background-color', 'rgba(34,34,34,' + opacity + ')'); 
} 

fadeNavbar($(window)); 

$(window).scroll(function() { 
    fadeNavbar($(this)); 
});