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.The aim is to have the navigation fixed when user scrolling the page and back to its original position when scrolling back.

Html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Fixed Top Menu With Scrolling Page</title>
    <link rel="stylesheet" href="StyleSheet.css" type="text/css" media="screen,projection" charset="utf-8" />
    <script type="text/javascript" src="JS/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        var _rys = jQuery.noConflict();
        _rys("document").ready(function () {
            _rys(window).scroll(function () {
                if (_rys(this).scrollTop() > 136) {
                    _rys('.nav-container').addClass("f-nav");
                } else {
                    _rys('.nav-container').removeClass("f-nav");
                }
            });
        });
    </script>
</head>
<body>
    <div class="wrapper">
        <div class="header">
        </div>
        <div class="nav-container">
            <div class="nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Contact US </a></li>
                </ul>
                <div class="clear"></div>
            </div>
        </div>
        <div class="main-content">
        </div>
        <div class="container">	
			<div class="main-content">	
				<h1>It's Working Hmmmmmm!</h1>
			</div>
		</div>
    </div>
</body>
</html>

You can download and use latest Jquery library and use it.

Fixed Menu When Scrolling Page With Css And Jquery

Html:

One reply on “Fixed Menu When Scrolling Page With Css And Jquery”