jQuery Sticky Navigation Bar For One Page Website - SMINT

SMINT is a jQuery plugin that make it easy to create a sticky menu which stays at the top of the page while you scroll down and menu buttons that automatically scroll the page to the section you clicked on. Ideal for those who love one page website.

Related plugins:

• Sticky Top Menu Bar with CSS3
• Fixed Position Top Menu Bar with jQuery and CSS3 - nagging-menu
• Super Tiny jQuery Sticky Navigation Menu Plugin
• Animated Sticky Header On Scroll with CSS3 and Javascript

How to use it:

1. Include jQuery library and jQuery SMINT on the website

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" 	src="js/jquery.smint.js"></script>

2. Create the html

<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">
<h1>Top</h1>
</div>
</div>

<div class="section s1">
<div class="inner">
<h1>Section 1</h1>
</div>
</div>

<div class="section s2">
<div class="inner">
<h1>Section 1</h1>
</div>
</div>

<div class="section s3">
<div class="inner">
<h1>Section 1</h1>
</div>
</div>

<div class="section s4">
<div class="inner">
<h1>Section 1</h1>
</div>
</div>

<div class="section s5">
<div class="inner">
<h1>Section 1</h1>
</div>
</div>

3. The CSS

.menuBtn {
background: center center no-repeat transparent;
background: #000;
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 10px;
}
.section {
width: 100%;
max-width: 1140px;
min-width: 960px;
z-index: 10;
position: relative;
margin: 0 auto;
padding: 0 0 20px 0;
}
.inner {
width: 960px;
margin: 0 auto;
position: relative;
min-height: 50px;
padding: 30px 0;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
padding: 30px 0;
}
/* This is the selector i used for my menu, it needs to be set as position:absolute; */
.subMenu {
position: absolute;
top: 462px;
height: 50px;
z-index: 1000;
width: 100%;
max-width: 1140px;
min-width: 960px;
background: #aabd46;
}
.subMenu .inner {
padding: 0;
font-weight: 400;
}
.subNavBtn {
display: block;
height: 35px;
width: 12%;
float: left;
margin: 0px 0px 0 0;
text-decoration: none;
font-size: 14px;
padding: 15px 2% 0 2%;
text-align: center;
color: #fff;
}
.end {
margin: 0;
}
/* SECTIONS */
.sTop {
min-height: 630px;
background: #e5e5e5;
color: #3d3d3d;
}
.s1 {
min-height: 500px;
background: #2e2e2e;
}
.s2 {
min-height: 500px;
background: #3f3f3f;
}
.s3 {
min-height: 500px;
background: #504f4f;
}
.s4 {
min-height: 500px;
background: #6e87a1;
color: white;
}
.s5 {
min-height: 500px;
background: #293b4d;
color: white;
}

4. Call the plugin with options

<script type="text/javascript">
	
$(document).ready( function() {
    $('.subMenu').smint({
    	'scrollSpeed' : 1000
    });
});

</script>

---

This awesome jQuery plugin is developed by outyear. For more Advanced Usages, please check the demo page or visit the official website.