DESIGNING

Instead of heading as written on the top of the written document, the webpage are designed with the navigation bar which include both the logo and the navigation menu for the site plus it gives the dynamic look to the page as well. It's main feature is that the visibility of the bar can be changed as we desire, such that it's visibility can be made dependent on how much the user scrolled the page. Here, i have written some code which will guide you how to create the navigation bar using css, which got visible when user scrolled some amount of content. I have skipped the part of creation of navigation menu just to reduce the complexity.

top bar
<body>	
<div id="navbar">
This is Header
</div> 
</body>    

body{
margin:0;
top:0px;
padding:0px;
}
#navbar
{
position:fixed;
top:0;
height: 40px;
display:none;
background-color:#333333;
width:100%;
} 
Well, it was also necessary to assign style for body part, to make our top bar occupying the whole width of the screen. Without specifying margin:0; for the body, the top bar have look something like this.

margin bar

jQuery version 1.7 introduce the on() method which is the replacement or preferred over the bind() method for attaching event handlers for selected elements. In place of $(window), you can also use $(document) or $("body"), three of them have the same effect. The "document" is refer to the html document, window is used for window object that is when we have created different frame, using iframe tag and "body" refer to the body tags.
 

$(window).on('scroll', function() {
         if ($(window).scrollTop() > 50) {
             $("#navbar").fadeIn("slow");
         }
         else {
           $("#navbar").fadeOut("slow");
         }
    });
  







All rights reserved, the content is copyrighted to the author.

RELATED POST