bootstrap 3在滾動時自定義固定導航，具有淡入淡出效果

Question

我正在嘗試淡入導航欄並在滾動到頁面底部時粘到頂部。 它的淡化效果僅在第一次起作用。 我的代碼如下。

 <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

你的問題是，在第一次執行fadeTo之后，你的元素會留下一個style="opacity: 1"屬性，它留在那里。 因此，滾動到頂部時必須將其刪除。

我也改變了導航欄隱藏的方式，我建議使用.hide() ，因為它也使用了元素的style屬性，這樣就不會被覆蓋。 並且還有一個navbarVisible var用於確定導航欄是否已經淡入，如果是，則在不需要時不會執行淡入淡出的代碼。 這應該是性能上的一小步。

這似乎工作得很好：

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

你不再需要這個部分了：

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

這是一個帶有工作代碼的JSFiddle示例的鏈接 ： JSFiddle Link

Answer 2

我的兩分錢......

只需添加此Javascript即可離開。 目前配置為在第一個200px的滾動上畢業。

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