Navigation menu: jQuery sticky scrolling navigation bar effect, jquery navigation bar
Sticky scrolling is a kind of user experience when the navigation is stuck on the browser during the scrolling process to facilitate website page browsing. Let's take a look at how it is implemented:
JQuery's smint plug-in is also a fixed plug-in for navigation menus. When the page is scrolling, the navigation menu will be fixed at the top; when you click the menu, the page will smoothly scroll to the corresponding area.
Compatibility
Because smint is usedposition: fixed
So it is not compatible with IE6. Applicable browsers: IE8, 360, FireFox, Chrome, Safari, Opera, aoyou, sogou, and windows of the world.
Import File
<link href="css/demo.css" rel="stylesheet" type="text/css">
<script src="js/jquery.min.js"></script><script src="js/jquery.smint.js"></script>
HTML
<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);"><div class="wrap"> <div class="subMenu"> <div class="inner"> <a href="#" id="sTop" class="subNavBtn">Home</a> <a href="#" id="s1" class="subNavBtn">Section 1</a> <a href="#" id="s2" class="subNavBtn">Section 2</a> <a href="#" id="s3" class="subNavBtn">Section 3</a> <a href="#" id="s4" class="subNavBtn">Section 4</a> <a href="#" id="s5" class="subNavBtn end">Section 5</a> </div> </div> <div class="section sTop"> <div class="inner"></div><br class="clear"> </div> <div class="section s1"> <div class="inner">
Note: You must set the position: absolute style for the external container of the menu (subMenu in the example above), and set the id for each a tag of the menu, the value of id is the same as the value of class in the corresponding area below.
JavaScript
$(function() { $('.subMenu').smint({ scrollSpeed : 1000 });});
Download source code