Download
User Rating: 2.3/5 ( 1 votes)
stickUp is a simple plugin that "sticks" an element to the top of the browser window while scrolling past it, always keeping it in view. This plugin works on multi-page sites, but has additional features for one-pager layouts.
Features
Simple Integration
stickUp is a jQuery plugin, which you can implement on any webpage alongside jQuery. You can easily makeany element, on any page, stick to the top of the browser window as the user scrolls past it. This feature is excellent for navigation menus, logos and/or contact information, which you may want the user to see at all times.
The "One Pager"
Although stickUp was made to work on any kind of website, it was originally designed for the "one-pager"style of websites. By using CSS the sticky navigation menu item will be highlighted as it's correlating content is crolled in and out of view.
Open Source
The GNU Lesser General Public License is a free software license published by the Free Software Foundation. The LGPL allows developers and companies to use and integrate LGPL software into their own (even proprietary) software without being required (by the terms of a strong copyleft) to release the source code of their own software-parts.
Source: lirancohen.github.io
1. INCLUDE JS FILES
<script src="js/stickUp.min.js"></script>
2. HTML
<!-- START THE NAVBAR -->
<div class="navbar-wrapper">
<div class="container">
<div class="navwrapper">
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">stickUp</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="menuItem active"><a href="#home">Home</a></li>
<li class="menuItem"><a href="#features">Features</a></li>
<li class="menuItem"><a href="#updates">Updates</a></li>
<li class="menuItem"><a href="#installation">Installation</a></li>
<li class="menuItem"><a href="#one-pager">One Pager</a></li>
<li class="menuItem"><a href="#extras">Extras</a></li>
<li class="menuItem"><a href="#wordpress">Wordpress</a></li>
<li class="menuItem"><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</div><!-- End Navbar -->
</div>
</div> <!-- END NAVBAR -->
3. JAVASCRIPT
jQuery(function($) {
$(document).ready( function() {
//enabling stickUp on the '.navbar-wrapper' class
$('.navbar-wrapper').stickUp();
});
});
JS Tutorial
