Sticky Menu (or Anything!) on Scroll

Wordpress Plugin
Download latest - 2.31

Developers

WebFactory
senff

Download Stats

Today 261
Yesterday 390
Last Week 2,458
All Time 260,560
Banner 772x250

The Sticky Menu (Or Anything) On Scroll plugin for WordPress allows you to make any element on your pages "sticky" as soon as it hits the top of the page when you scroll down. Although this is commonly used to keep menus at the top of your page, the plugin allows you to make ANY element sticky (such as a Call To Action box, a logo, etc.)

A little bit of basic HTML/CSS knowledge is required. You just need to know how to pick the right selector for the element you want to make sticky, and you need to be sure it's a unique selector. Sometimes a simple selector like "nav", "#main-menu", ".menu-main-menu-1" is enough. Other times you will have to be more detailed and use a more specific selector such as "header > ul:first-child" or "nav.top .menu-header ul.main".

Features

  • Any element can stick: although common use is for navigation menus, the plugin will let you pick any unique element with a name, class or ID to stick at the top of the page once you scroll past it. Use it for a sidebar, Call-to-action box, banner ad, etc.
  • Positioning from top: optionally, you can add any amount of space between the sticky element and the top of the page, so that the element is not always stuck at the "ceiling" of the page.
  • Enable for certain screen sizes only: optionally, you can set a minimum and/or maximum screen size where the stickiness should work. This can be handy if you have a responsive site and you don't want your element to be sticky on smaller screens, for example.
  • Push-up element: optionally, you can pick any other element lower on the page that will push the sticky element up again (for example a sidebar widget).
  • Admin Bar aware: checks if the current user has an Admin Toolbar at the top of the page. If it has, the sticky element will not obscure it (or be obscured by it).
  • Z-index: in case there are other elements on the page that obscure or peek through your sticky element, you can add a Z-index easily.
  • Legacy Mode: in 2.0, a new method of making things sticky was introduced. In Legacy Mode, the old method will be used. See FAQ for details.
  • Dynamic Mode: some issues that frequently appear in responsive themes have been address by adding a Dynamic Mode (Legacy Mode only). See FAQ for details.
  • Debug Mode: find out possible reasons why your element doesn't stick by switching on Debug Mode, and error messages will appear in your browser's console.

Releases (15 )

Version Release Date Change Log
2.2 2020-04-25
  • 2020-02-01
  • bug fixes
  • minor GUI improvements
  • 100,000 users hit on 2020-01-31
2.1.1 2017-11-29
  • Fixed minification bug
2.1 2017-11-11
  • Sticky element has specific classes to target sticky/non-sticky state: ".element-is-sticky" and ".element-is-not-sticky"
2.0.1 2016-08-29
  • fixed padding calculation bug (percentages are off when sticky)
  • fixed bug where assigned styles loop caused JS error
2.0 2016-05-23
  • Introduced a new/better method for making elements sticky
  • Added Legacy Mode (for those who want to continue the old method)
  • Split up settings screen in Basic and Advanced
  • Debug mode uses uncompressed JS file for easier remote debugging
1.3.1 2016-04-17
  • Minor bug fix for push-up element
1.3 2015-05-25
  • Added functionality to move sticky element down in case there is an Administrator Toolbar at the top of the page
  • Added functionality to push sticky element up by another element lower down the page
1.2.1 2015-04-22
  • Bug with Dynamic Mode select box/label fixed
  • Bug with Z-index fixed (thanks @aguseo for reporting)
  • All text in plugin fully translatable
  • Added FAQ tab to settings screen
  • Added infobox to settings screen
  • Added a few comments to source code
1.2 2015-02-12
  • Dynamic Mode added (addressing problems with dynamically created menus -- see Frequently Asked Questions above for details).
1.1.4 2014-12-14
  • Ready for WordPress 4.1 (and TwentyFifteen).
  • Fixes issue when element has padding in percentages.
1.1.3 2014-10-13
  • Fixes width calculation bug introduced in previous version (sorry about that), box sizing now supported.
1.1.2 2014-10-12
  • Fixes element width calculation bug.
1.1.1 2014-10-12
  • Fixes viewport calculation bug.
1.1 2014-10-12
  • Added functionality for optional minimum/maximum screen size
1.0 2014-09-19
  • initial release (using v1.1 of the standalone jQuery plugin)

=