Beginning .Net , .Net Tips : Simple sticky menu using Javascript and JQuery

 Click Here to Download Sample StickyJavascriptMenu.zip

Now a days sticky menu is most popular menu in websites.
You can generate sticky menu using JQuery and some CSS classes.
You are able to working menu in out downloadable samples.
In this example we integrate sticky menu into aspx page.

Here is example for this.
In this example we are using "jquery-1.4.1.js" JQuery file. You can find this file from JQuery website or in our sample application folder. We are displaying menu on screen and when user scoll down the page our sticky menu is stick at the top of the browser.
You can set many position using javascript and css classes.

ASPX Code :

    <div id="wrapper">
        <header>
        <h1>Simple Sticky Menu</h1>
        </header>
        <nav>
        <table><tr><td>Home</td><td>|</td><td>About Us</td><td>|</td><td>Contact Us</td></tr></table>
        </nav>
        <div id="content">
            Website informations. Website informations. Website informations. Website informations.
            Website informations. Website informations. Website informations. Website informations.
            Website informations.
        </div>
    </div>

Javascript Code :

  $(document).ready(function () {

            var intAboveHeight = $('header').outerHeight();
                    
            $(window).scroll(function () {
                    
                if ($(window).scrollTop() > intAboveHeight) {
                        
                    $('nav').addClass('fixed').css('top', '0').next().css('padding-top', '60px');

                } else {
                        
                    $('nav').removeClass('fixed').next().css('padding-top', '0');
                }
            });
        });

CSS classes :

        #wrapper
        {
            width: 940px;
            margin: 0 auto;
        }
        
        header
        {
            text-align: center;
            padding: 70px 0;
        }
        
        nav
        {
            background: url(bg.png) no-repeat;
            height: 60px;
            width: 960px;
            margin-left: -10px;
            line-height: 50px;
            position: relative;
        }
        
        #content
        {
            background: #fff;
            height: 1500px; /* presetting the height */
            box-shadow: 0 0 5px rgba(0,0,0,0.3);
        }
        
        .fixed
        {
            position: fixed;
        }

Output : 

(To view original image , click on image)

For Beginning .Net articles. Click Here...

This type of .Net Tips is very useful in day to day programming life.

Note : Give Us your valuable feedback in comments. Give your suggestions in this article so we can update our articles accordingly that.