önyükleme 3 Kaydırma üzerine kaydırma üzerinde özelleştirilmiş sabit navigasyon

Question

Gezinme çubuğunda kaybolmaya çalışıyorum ve sayfanın en altına giderken üst üste yapışıyorum. Onun solmaya etkisi sadece ilk kez çalışır. Kodum aşağıda.

<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

Senin sorunun ilk kez fadeTo çalıştırıldıktan sonra, sizin unsuru bırakılır bir style="opacity: 1" özniteliği, sol olmasıdır. Bu nedenle, en üste geldiğinizde onu kaldırmanız gerekir.

Ayrıca, navbarın gizlendiğini de değiştirdim, .hide() kullanmanızı öneririm, bu nedenle öğelerin 'style özniteliğini kullanır, bu nedenle geçersiz kılmayacaktır. Ve ayrıca, navbarın zaten soluk olup olmadığını belirlemek için kullanılan bir navbarVisible var var ve eğer varsa, ihtiyaç duyulmadığında soldurma kodu yürütülmez. Bu performansta küçük bir adım olmalı.

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

Artık bu kısmını gerekmez yapmak :

Bu sadece iyi çalışıyor görünüyor JSFiddle Link

: Burada

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

çalışma kodu ile örnek JSFiddle bir bağlantı var

Answer 2

Benim iki sent ...

Sadece bu Javascript'i ekleyin ve giderseniz gidin. Şu anda, ilk 200px kaydırma üzerinde mezun olacak şekilde yapılandırıldı.

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