I'm going to explain you how to make menu static position when scrolling page. Basic HTML, CSS & jQuery knowledge is enough to do this work. Just we are adding a dynamic class when page scroll and add styles for dynamic class. Styles will appear based on class name.
We just need to call jQuery and Bootstrap (optional, Bootstrap used to make skeleton and UI style. You can style custom style also) from CDN or download from respective websites.
HTML
Design a HTML skeleton and include jQuery, Boostrap, HTML5 Shiv, Custom JS, CSS files in html head.
<!DOCTYPE HTML> <html> <head> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="js/script.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="container">
<div class="row"> <h2>How to create fixed menu when scroll page</h2> <span> </span> </div>
<!-- Navigation container --> <div class="nav-container"> <nav class="row navbar navbar-default"> <div class="container"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div> </nav> </div> <!-- End Navigation container -->
<div class="row content-wrap"> <h3>Lorem Ipsum has been the industry's</h3> <hr/> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections </p> <h3>Tellus ac cursus commodo</h3> <hr/> <dl class="dl-horizontal"> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> <dt>Euismod</dt> <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> <dd>Donec id elit non mi porta gravida at eget metus.</dd> <dt>Malesuada porta</dt> <dd>Etiam porta sem malesuada magna mollis euismod.</dd> <dt>Felis euismod semper eget lacinia</dt> <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd> </dl> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> <h3>Hampden-Sydney College in Virginia</h3> <hr/> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections </p> </div> </div>
<footer> <div class="container"> <div class="row">Copyright © 2015-18, shanidkv.com</div> </div> </footer> </body> </html>
jQuery
Add fixed-nav class to .nav-container when page scroll 83px.
$(function () {
var nav = $('.nav-container');
var content = $('.content-wrap');
$(window).scroll(function () {
if ($(this).scrollTop() > 83) {
nav.addClass("fixed-nav");
content.addClass("topmargin");
} else {
nav.removeClass("fixed-nav");
content.removeClass("topmargin");
}
});
});
CSS
Write fixed position style for dynamic class .fixed-nav. Styles will appear when append the class to navigation wrapper.
.fixed-nav{
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 999;
}
.fixed-nav .navbar-default{
background-color: rgba(67, 154, 226, 0.89);
}
.topmargin{
margin-top: 83px;
}
/*Optional styles, Added for demo*/
.content-wrap{
min-height: 1000px; /*Added to get browse scroll- demo*/
}
.navbar-default{
background-color: rgb(67, 154, 226);
border-color: rgb(46, 127, 194);
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-brand{
color: #fff;
}
footer{
background: rgb(67, 154, 226);
padding: 10px 0px;
color: #fff;
}
