jQuery Plugin For Sticky Navigation Bar On Scroll - Sexy Menu

sexy-menu.js is a lightweight jQuery plugin for creating a sticky top navigation bar containing anchor links which scroll the web page to desired section.

How to use it:

1. Include the latest version of jQuery javascript library and sexy-menu.js script anywhere on your Html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script type="text/javascript" rel="javascript" src="js/jquery.sexy-menu.min.js"></script> 

2. Create the Html for creating a top bar navigation menu with some anchor links pointing to the content sections.

<nav id="sexy-menu"> 
<a href="#anchor1">Anchor 1</a> 
<a href="#anchor2">Anchor 2</a> 
<a href="#anchor3">Anchor 3</a> 
...
</nav>

3. The required CSS to style the navigation and make it sticky at the top of the web page.

.sexy-menu {
position: fixed;
background: #fff;
top: 0;
left: 0;
right: 0;
transition: all .5s ease-out
}
.sexy-menu.detached {
margin-top: -100px;
opacity: 0;
filter: alpha(opacity=0)
}
.sexy-menu.visible {
margin-top: 0;
opacity: 1;
filter: alpha(opacity=1)
}

4. Call the plugin with default options.

<script type="text/javascript" rel="javascript">
$(function() {
$('#sexy-menu').sexymenu({
classes: {
  visible: 'visible',
  detached: 'detached'
},

topOffset: 250,
bottomOffset: 150,
hideShowOffset: 10,

delay: 30
});
});
</script>

---

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