Bootstrap 3 custom fixed flick scroll navigation

Question

I'm trying to fade out in the navigation bar and stick to the top by scrolling to the bottom of the page. Its fade effect only works for 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 execution of fadeTo your element remains with the style="opacity: 1" attribute, which remains there. So you need to delete it when you scroll up.

I also changed the way the navigator is .hide() , I suggest using .hide() , because it also uses the style attribute of the elements, so it will not be overridden. And there is also navbarVisible var, which is used to determine if the navigation is already fading, and if so, the code to fade it is not executed when it is not needed. This should be a tiny step in productivity.

Everything seems to work 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 no longer need this part:

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

Here's a link to a working code JSFiddle example: JSFiddle link

Answer 2

My two cents ...

Just add this javascript and leave. Currently set to release during the first 200px scroll.

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