Website At 100: scrolling page

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
In this Tutorial I will explain <strong style="line-height: inherit;">how to create fixed menu when scrolling page with CSS and jQuery</strong>, you already know jQuery right? A short description about jQuery, jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
The aim is to have the navigation fixed when user scrolling the page and back to its original position when scrolling back to top.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px;">
Demo</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
Click <a href="http://www.sutanaryan.com/Tutorials/fixed-menu-when-scrolling-page-with-CSS-and-jQuery/" rel="nofollow" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" target="_blank" title="Visit demo page">here</a>to view demo page.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
There are lots of tutorial out there in the net but it contains lots of JS code so I decided to create my own way and with only a few lines of JS code, in this tutorial I only use 2 JS functions to make the fixed menu working, yes only two functions.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
Ok, let’s start.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px;">
jQuery Library</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
All we need is only jQuery library; you can download it in jQuery site or use other library from <a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" rel="nofollow" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Google CDN">Google CDN</a>, <a href="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js" rel="nofollow" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Microsoft CDN">Miscrosoft CDN</a> and <a href="http://code.jquery.com/jquery-1.7.min.js" rel="nofollow" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="jQuery CDN">jQuery CDN</a>.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px;">
HTML</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
This contains our menu HTML element, this is just a simple HTML UL tag to make our menus but if you already have one then use that instead.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px;">
<div>
NOTE:</div>
<div>
If you’re going to use your old menus make sure to replace the class in JS code.<br />
<br /></div>
</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a94eeff3560091964238" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px;">
<div data-settings=" show">
<div title="Toggle Line Numbers">
</div>
<div title="Toggle Plain Code">
</div>
<div title="Toggle Line Wrap">
</div>
<div title="Expand Code">
</div>
<div title="Open Code In New Window">
</div>
<div style="line-height: inherit; margin-bottom: 18px;">
XHTML</div>
</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a94eeff3560091964238-1">
1</div>
<div data-line="crayon-52a94eeff3560091964238-2">
2</div>
<div data-line="crayon-52a94eeff3560091964238-3">
3</div>
<div data-line="crayon-52a94eeff3560091964238-4">
4</div>
<div data-line="crayon-52a94eeff3560091964238-5">
5</div>
<div data-line="crayon-52a94eeff3560091964238-6">
6</div>
<div data-line="crayon-52a94eeff3560091964238-7">
7</div>
<div data-line="crayon-52a94eeff3560091964238-8">
8</div>
<div data-line="crayon-52a94eeff3560091964238-9">
9</div>
<div data-line="crayon-52a94eeff3560091964238-10">
10</div>
<div data-line="crayon-52a94eeff3560091964238-11">
11</div>
<div data-line="crayon-52a94eeff3560091964238-12">
12</div>
<div data-line="crayon-52a94eeff3560091964238-13">
13</div>
<div data-line="crayon-52a94eeff3560091964238-14">
14</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a94eeff3560091964238-1">
<div class=”nav-container”></div>
<div id="crayon-52a94eeff3560091964238-2">
<div class=”nav”></div>
<div id="crayon-52a94eeff3560091964238-3">
    <ul></div>
<div id="crayon-52a94eeff3560091964238-4">
        <li><a href=”">Home</a></li></div>
<div id="crayon-52a94eeff3560091964238-5">
        <li><a href=”">CSS</a></li></div>
<div id="crayon-52a94eeff3560091964238-6">
        <li><a href=”">PHP</a></li></div>
<div id="crayon-52a94eeff3560091964238-7">
        <li><a href=”">SEO</a></li></div>
<div id="crayon-52a94eeff3560091964238-8">
        <li><a href=”">jQuery</a></li></div>
<div id="crayon-52a94eeff3560091964238-9">
        <li><a href=”">Wordpress</a></li></div>
<div id="crayon-52a94eeff3560091964238-10">
        <li><a href=”">Services</a></li></div>
<div id="crayon-52a94eeff3560091964238-11">
    </ul></div>
<div id="crayon-52a94eeff3560091964238-12">
    <div class=”clear”></div> /*clear floating div*/</div>
<div id="crayon-52a94eeff3560091964238-13">
</div></div>
<div id="crayon-52a94eeff3560091964238-14">
</div></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px;">
CSS</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
To make our menu list horizontally we need to add CSS code.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a94eeff356a781048623" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px;">
<div data-settings=" show">
<div title="Toggle Line Numbers">
</div>
<div title="Toggle Plain Code">
</div>
<div title="Toggle Line Wrap">
</div>
<div title="Expand Code">
</div>
<div title="Expand Code">
</div>
<div title="Open Code In New Window">
</div>
<div style="line-height: inherit; margin-bottom: 18px;">
CSS</div>
</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a94eeff356a781048623-1">
1</div>
<div data-line="crayon-52a94eeff356a781048623-2">
2</div>
<div data-line="crayon-52a94eeff356a781048623-3">
3</div>
<div data-line="crayon-52a94eeff356a781048623-4">
4</div>
<div data-line="crayon-52a94eeff356a781048623-5">
5</div>
<div data-line="crayon-52a94eeff356a781048623-6">
6</div>
<div data-line="crayon-52a94eeff356a781048623-7">
7</div>
<div data-line="crayon-52a94eeff356a781048623-8">
8</div>
<div data-line="crayon-52a94eeff356a781048623-9">
9</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a94eeff356a781048623-1">
.nav-container{ background: url(‘images/nav_bg.jpg’) repeat-x 0 0;}</div>
<div id="crayon-52a94eeff356a781048623-2">
    .f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} /* this make our menu fixed top */</div>
<div id="crayon-52a94eeff356a781048623-3">
</div>
<div id="crayon-52a94eeff356a781048623-4">
.nav { height: 42px;}</div>
<div id="crayon-52a94eeff356a781048623-5">
    .nav ul { list-style: none; }</div>
<div id="crayon-52a94eeff356a781048623-6">
    .nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;}</div>
<div id="crayon-52a94eeff356a781048623-7">
    .nav ul li:first-child{ padding-left: 0;}</div>
<div id="crayon-52a94eeff356a781048623-8">
    .nav ul li a { }</div>
<div id="crayon-52a94eeff356a781048623-9">
    .nav ul li a:hover{ text-decoration: underline;}</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
We set the z-index very high since we don’t want any other absolute element to be on top of our navigation and add with in percent to center menu while scrolling.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px;">
Javascript</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
This small JS code contains the main functions of our fixed scroll menu.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a94eeff356f323057027" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px;">
<div data-settings=" show">
<div title="Toggle Line Numbers">
</div>
<div title="Toggle Plain Code">
</div>
<div title="Toggle Line Wrap">
</div>
<div title="Expand Code">
</div>
<div title="Open Code In New Window">
</div>
<div style="line-height: inherit; margin-bottom: 18px;">
JavaScript</div>
</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a94eeff356f323057027-1">
1</div>
<div data-line="crayon-52a94eeff356f323057027-2">
2</div>
<div data-line="crayon-52a94eeff356f323057027-3">
3</div>
<div data-line="crayon-52a94eeff356f323057027-4">
4</div>
<div data-line="crayon-52a94eeff356f323057027-5">
5</div>
<div data-line="crayon-52a94eeff356f323057027-6">
6</div>
<div data-line="crayon-52a94eeff356f323057027-7">
7</div>
<div data-line="crayon-52a94eeff356f323057027-8">
8</div>
<div data-line="crayon-52a94eeff356f323057027-9">
9</div>
<div data-line="crayon-52a94eeff356f323057027-10">
10</div>
<div data-line="crayon-52a94eeff356f323057027-11">
11</div>
<div data-line="crayon-52a94eeff356f323057027-12">
12</div>
<div data-line="crayon-52a94eeff356f323057027-13">
13</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a94eeff356f323057027-1">
jQuery(“document”).ready(function($){</div>
<div id="crayon-52a94eeff356f323057027-2">
</div>
<div id="crayon-52a94eeff356f323057027-3">
    var nav = $(‘.nav-container’);</div>
<div id="crayon-52a94eeff356f323057027-4">
</div>
<div id="crayon-52a94eeff356f323057027-5">
    $(window).scroll(function () {</div>
<div id="crayon-52a94eeff356f323057027-6">
        if ($(this).scrollTop() > 136) {</div>
<div id="crayon-52a94eeff356f323057027-7">
            nav.addClass(“f-nav”);</div>
<div id="crayon-52a94eeff356f323057027-8">
        } else {</div>
<div id="crayon-52a94eeff356f323057027-9">
            nav.removeClass(“f-nav”);</div>
<div id="crayon-52a94eeff356f323057027-10">
        }</div>
<div id="crayon-52a94eeff356f323057027-11">
    });</div>
<div id="crayon-52a94eeff356f323057027-12">
</div>
<div id="crayon-52a94eeff356f323057027-13">
});</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
So, if we are on the top less than 136 height in pixel the menu is in the original position and add f-nav CSS class when greater than 136px height or add f-nav CSS class on scroll, where the top page greater than 136px height.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
That’s it, its easy right? Enjoy!</div>
</div>

HOW TO CREATE FIXED MENU WHEN SCROLLING PAGE WITH CSS AND JQUERY

In this Tutorial I will explain how to create fixed menu when scrolling page with CSS and jQuery , you already know jQuery right? A short...