bootstrap 3 customized fixed navigation on scroll with fade effect

Question

I am trying to fade in the navigation bar and stick to top while scrolling to bottom of the page. Its fade effect works only the first time. My code is below.

 <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

Your problem is that after the first time fadeTo is executed, your element is left with a style="opacity: 1" attribute, which is left there. So you have to remove it when you scroll to the top.

I've also changed the way the navbar is hidden, I suggest using .hide(), cause it also uses the elements' style attribute, that way it will not be overridden. And there's also a navbarVisible var that is used to determine if the navbar is already faded in and if it is, the code for fading it in is not executed when not needed. This should be a tiny step up in performance.

This seems to work just fine:

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

You don't need this part anymore:

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

Here's a link to an example JSFiddle with working code: JSFiddle Link