ScrollNaviJs is jquery plugin for fix navigation on top after scroll second section content, actually navigation fix in bottom of browser when we are in first section content
- 1)Include jquery plugin and ScrollNaviJs
- 2)call scrollnavi function with navigation ID
<script src="js/jquery.js"></script>
<script src="js/scroll_navi.js"></script>
<script>
$(document).ready(function(){
$("#nav").scroll_navi();
});
</script>
- 3)put html code in body tag like below:
<div id="nav">
<div class="container">
<ul>
<li><a href="#section1">Section1</a></li>
<li><a href="#section2">Section2</a></li>
<li><a href="#section3">Section3</a></li>
<li><a href="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/senthilraj/ScrollNaviJs#about-me" data-outerpage="true">About Developer</a></li>
</ul>
</div>
</div>
<div id="section1">Section1</div>
<div id="section2">Section2</div>
<div id="section3">Section3</div>
- 4)also put css fiel
<link rel="stylesheet" type="text/css" href="css/scrollnavi.css">
###Options
- if you want to set scroll speed, then call method like below:
$("#nav").scroll_navi({speed:1500});
- if you want to set link for another page, use data-outerpage attribute and put as 'true' like below:
<a href="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/senthilraj/ScrollNaviJs#about-me" data-outerpage="true">About Developer</a>
Download ScrollNaviJs zip archive
I am senthil and I am 22 years old designer and developer specialised in jquery. I am doing rich websites and creating mobile apps using in phonegap, jquery moblie, any doubts or help feel free to contact me Mail: [email protected]
Website: https://www.senthildesigner.co.nr/
if you are using our plugin, we will add in here as plugin users with website link, so kindly send me your website link to this MailId : [email protected]
Thanks