chenzhihao / Sticky Nav
A jQuery plugin make the navbar sticky, smart anchor link highlighting, smooth scrolling. Simple and powerful.
Stars: ✭ 21
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Sticky Nav
Jquery Drawsvg
Lightweight, simple to use jQuery plugin to animate SVG paths
Stars: ✭ 759 (+3514.29%)
Mutual labels: jquery-plugin, jquery
Jquery Animatenumber
jQuery animate number
Stars: ✭ 768 (+3557.14%)
Mutual labels: jquery-plugin, jquery
Jquery.marquee
jQuery plugin to scroll the text like the old traditional marquee
Stars: ✭ 857 (+3980.95%)
Mutual labels: jquery-plugin, jquery
Jquery Datetextentry
jQuery plugin providing a widget for date entry (not a date picker)
Stars: ✭ 19 (-9.52%)
Mutual labels: jquery-plugin, jquery
Jquery Selectric
jQuery plugin for easy manipulation and customization of HTML selects
Stars: ✭ 724 (+3347.62%)
Mutual labels: jquery-plugin, jquery
Trip.js
🚀 Trip.js is a plugin that can help you customize a tutorial trip easily with more flexibilities.
Stars: ✭ 789 (+3657.14%)
Mutual labels: jquery-plugin, jquery
Rowgrid.js
A small, lightweight JavaScript plugin for placing items in straight rows (jQuery and vanilla JS version) – Demo:
Stars: ✭ 670 (+3090.48%)
Mutual labels: jquery-plugin, jquery
Printthis
jQuery printing plugin; print specific elements on a page
Stars: ✭ 902 (+4195.24%)
Mutual labels: jquery-plugin, jquery
Push State
Turn static web sites into dynamic web apps.
Stars: ✭ 16 (-23.81%)
Mutual labels: jquery-plugin, jquery
Animatescroll.js
A Simple jQuery Plugin for Animating Scroll
Stars: ✭ 708 (+3271.43%)
Mutual labels: jquery-plugin, jquery
Framecarousel
A jQuery plugin for quickly creating carousels within frames
Stars: ✭ 14 (-33.33%)
Mutual labels: jquery-plugin, jquery
Stupid Table Plugin
A stupidly small and simple jQuery table sorter plugin
Stars: ✭ 704 (+3252.38%)
Mutual labels: jquery-plugin, jquery
Cz Parallax
Simple and tiny jQuery plugin for Parallax effect.
Stars: ✭ 10 (-52.38%)
Mutual labels: jquery-plugin, jquery
Selectpage
A simple style and powerful selector, including ajax remote data, autocomplete, pagination, tags, i18n and keyboard navigation features
Stars: ✭ 679 (+3133.33%)
Mutual labels: jquery-plugin, jquery
Tableexport
The simple, easy-to-implement library to export HTML tables to xlsx, xls, csv, and txt files.
Stars: ✭ 781 (+3619.05%)
Mutual labels: jquery-plugin, jquery
Jquery Smartwizard
The awesome jQuery step wizard plugin
Stars: ✭ 635 (+2923.81%)
Mutual labels: jquery-plugin, jquery
Isinviewport
An ultra-light jQuery plugin that tells you if an element is in the viewport but with a twist.
Stars: ✭ 646 (+2976.19%)
Mutual labels: jquery-plugin, jquery
Jquery Powertip
💬 A jQuery plugin that creates hover tooltips.
Stars: ✭ 822 (+3814.29%)
Mutual labels: jquery-plugin, jquery
Inputtounsi
A jQuery plugin for entering and validating Tunisian users' data or any other data. It is made very easy to use and easier to customize
Stars: ✭ 25 (+19.05%)
Mutual labels: jquery-plugin, jquery
stickyNav.js
stickyNavbar.js: A jQuery plugin make the navbar sticky, smart anchor link highlighting, smooth scrolling. Simple and powerful.
1. Setup
Include jQuery library and stickyNav.js itself:
install by bower:
bower install sticky-nav
<!-- all these references goes before the closing body tag-->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="/script/stickyNav.js"></script>
2. HTML Markup
Navigation:
<div class="header">header</div>
<div class="banner">banner</div>
<div class="nav">
<ul>
<li>
<div><a href="#we">we</a></div>
</li>
<li>
<div><a href="#should">should</a></div>
</li>
<li>
<div><a href="#make">make</a></div>
</li>
<li>
<div><a href="#life">life</a></div>
</li>
<li>
<div><a href="#easier">easier</a></div>
</li>
</ul>
</div>
Body markup, not require any addtional class name:
<div id="we">
<!-- Your content goes here -->
</div>
<div id="should">
<!-- Your content goes here -->
</div>
<div id="make">
<!-- Your content goes here -->
</div>
<div id="life">
<!-- Your content goes here -->
</div>
<div id="easier">
<!-- Your content goes here -->
</div>
3. CSS:
Add active
class into your style.css
and style it as you like, eg.:
ul.active a {
color: #fff !important;
}
Note: You can attch active
class to li in navbar or the a in navbar directly, check the options
object usage below.
4. jQuery:
Call stickyNavbar function on the navigation wrapper (.header
), nav tag or ul tag either without options object:
$('.nav').stickyNavbar();
or with the options object:
var options = {
header: '.header', //the header selector
activeClass: "active", // the class you want to attach
attachActiveClassTo: "li", // the element you want to attach active class "li"/"a"
animationDuration: 500, // the animation duration for smooth scroll
easing: "swing", // the animation easing for smooth scroll
disableOnMobile: true, // if disable sticky nav on mobile
mobileWidth: 480 // default break point for mobile width
};
$('.nav').stickyNavbar(options);
5. Demo
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].