ms-nav

jQuery-nav-plugin

a jQuery plugin can be used to create a flexible one page scroll with parallex effect

Install

git clone https://github.com/EgAlexDeveloper/jQuery-nav-plugin.git

How To Use

1- add jquery.js, msNav.js and style.css to your project

<!-- the site styles -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- the site scripts -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/msNav.js"></script>

2- attach them to the html file you use 3- be sure from adding the nav container to the html and a unique id for each element you use like this

<!-- Nav Bar container -->
<ul id="nav" class="scroller-nav"></ul>
<!-- Page Elements -->
<div id="firstDiv"></div>
<div class="parallex first-parallex"></div>
<div id="secondDiv"></div>
<div class="parallex second-parallex"></div>
<div id="lastDiv"></div>

4- in the jquery ready function applay the plugin to the document and add all plugins paramaters

<script type="text/javascript">
    (function($) {
        $(document).MSNAV({
            // the elements than we need to applay the nav plugin on it
            elements: ["#firstDiv", "#secondDiv", "#lastDiv"],
            // optional just required in case you have a parallex sections with background image and you need to animate this image with scrolling
            parallex: [".first-parallex", ".second-parallex"],
            // the element that will wrap the bullets
            nav: $('#nav'),
            // the active class name
            currentClass: "current",
            // the scrolling speed
            scrollSpeed: 750
        });
    }(jQuery));
</script>