javascript - 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 变量，用于确定导航栏是否已经淡入，如果是，则在不需要时不执行用于淡入的代码。这应该是性能的微小提升。

这似乎工作得很好:

<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