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

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

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.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<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.

  <div class="nav-actions">
      <li>Secondary Link 1</li>
      <li>Secondary Link 2</li>
      <li>Secondary Link 3</li>
    <div class="clear"></div>
  <div class="nav-main">
    <div class="logo">Awesome logo</div>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
    <div class="clear"></div>

3. Initialize the plugin.

  offsetLimit: $('.nav-actions').outerHeight(),

4. Available optiopns.


  // The height (in pixels) of how much the navigation should be hidden while scrolling down.
  offsetLimit: element.outerHeight(),

  // The amount that must be scrolled before interaction starts
  scrollThreshold: 50,

  // Callback function that executes after each scroll event. 
  onScroll: function() {}

Change log:


  • 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.