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()，因为它也使用了元素＆＃39; 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));
});

bootstrap 3在滚动时自定义固定导航，具有淡入淡出效果

2 个答案: