jQuery Plugin For Fixed Navigation Based On Scroll Direction Semi Sticky - Download jQuery Plugin For Fixed Navigation Based On Scroll Direction - Semi-Sticky

Download jQuery Plugin For Fixed Navigation Based On Scroll Direction – Semi-Sticky

By Posted on

This time I will share jQuery Plugin and tutorial about jQuery Plugin For Fixed Navigation Based On Scroll Direction – Semi-Sticky, hope it will help you in programming stack.

jQuery Plugin For Fixed Navigation Based On Scroll Direction Semi Sticky - Download jQuery Plugin For Fixed Navigation Based On Scroll Direction - Semi-Sticky
File Size: 7.31 KB
Views Total: 3555
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download



Semi-Sticky is a jQuery plugin to create a fixed navigation bar that shows/hides part of itself based on scroll direction. 

How to use it:

1. Load the jQuery semi-sticky plugin after you have jQuery library included.

view source
1 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
2 <script rc="src/semisticky.js"></script>

2. Create a navigation for your website. The navigation consists of two parts: the main navigation bar + a bar with some secondary links. The main navigation is always visible, but the secondary links are hidden/revealed when the user scrolls down/up. A scrolling threshold must be reached before the hide/reveal interaction takes place.

view source
01 <nav>
02   <div class="nav-actions">
03     <ul>
04       <li>Secondary Link 1</li>
05       <li>Secondary Link 2</li>
06       <li>Secondary Link 3</li>
07     </ul>
08     <div class="clear"></div>
09   </div>
10   <div class="nav-main">
11     <div class="logo">Awesome logo</div>
12     <ul>
13       <li>Link 1</li>
14       <li>Link 2</li>
15       <li>Link 3</li>
16     </ul>
17     <div class="clear"></div>
18   </div>
19 </nav>

3. Initialize the plugin.

view source
1 $('nav').semisticky({
2   offsetLimit: $('.nav-actions').outerHeight(),
3 })

4. Available optiopns.

view source
01 $('nav').semisticky({
02  
03   // The height (in pixels) of how much the navigation should be hidden while scrolling down.
04   offsetLimit: element.outerHeight(),
05  
06   // The amount that must be scrolled before interaction starts
07   scrollThreshold: 50,
08  
09   // Callback function that executes after each scroll event.
10   on<a href="https://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>: function() {}
11    
12 })

Change log:

2015-11-23

  • Switch delta calculation so scrolling down results in a positive number

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




source : jqueryscript.net

Related posts: