NOTICE

Adfly Links not working Find Direct Links HERE

Add jQuery Stcky Scroll Menu bar When Scroll down

















<!--[if lt IE 9]>
        <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <!-- required for this demo -->
        
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script>
            $(function() {
                // grab the initial top offset of the navigation 
                var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
                // our function that decides weather the navigation bar should have "fixed" css position or not.
                var sticky_navigation = function(){
                    var scroll_top = $(window).scrollTop(); // our current vertical position from the top
                    // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
                    if (scroll_top > sticky_navigation_offset_top) { 
                        $('#sticky_navigation').css({ 'position': 'fixed'  });
                    } else {
                        $('#sticky_navigation').css({ 'position': 'relative', 'top':0 }); 
                    }   
                };
                // run our function on load
                sticky_navigation();
                // and run it again every time you scroll
                $(window).scroll(function() {
                    sticky_navigation();
                });
                // NOT required:
                // for this demo disable all links that point to "#"
                $('a[href="#"]').click(function(event){ 
                    event.preventDefault(); 
                });
            });
        </script>
  
  
  
<style type="text/css">
  
.demo_container {  }


#sticky_navigation { height:50px;}
  </style>
  
  <br>
  Header
  <br>
  Header
  <br>
  Header
  <br>
  Header
  <br>
  
  
  
           <div id="sticky_navigation">
                                                <div class="demo_container" >
            
            Content To be Stick Goes HERE
            
            
            </DIV>
            </DIV>
  
  

  Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>Blah
  <br>


0 comments :

Feel free to leave comment if you like above widget, have any questions or just say Hi! :)