navigation scroll effect with jQuery

Download   Demo

This jquery tutorial  ScrollNaviJs for fix navigation on top after scroll second section content, actually navigation fix in bottom of browser when we are in first section content

How to use

• 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="https://github.com/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="https://github.com/senthilraj/ScrollNaviJs#about-me" data-outerpage="true">About Developer</a>

navigation scroll effect with jQuery