stickUp is a jQuery plugin, which you can implement on any webpage alongside jQuery. You can easily make any 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.
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.
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.
The first version of the stickUp jQuery plugin has oficially been launched. This is still in Beta and there may be a few bugs, but they are will get sorted out in the coming weeks. Pleaes contact me if you experience any troubles. Check back often for updates on new features.
Decided to add anchor functionality so that as certain sections of a 'One Pager' style website, like this one, could trigger a CSS change as they're scrolled into view. That way your users know where they are while they're scrolling through content. More options are coming for this in the future.
When I initially made the plugin the goal was to make the element stick to the very top, but after deciding to make an official example page for it I realizd that I loved the look of a floating plugin. So I added a little feature called marginTop to the mix. This allows the element to be caught by it's margin rather than when it hits the top of the page.
I've decided to create a plugin out of necessity. There are plenty of "sticky nav" jQuery plugins available out there, but none of them seem to work as smoothly as I'd like. I decided to create my own and out of that stickUp was born! It's not perfect and has it's kinks, but they will be worked out over the coming weeks.
You have a "one-pager" layout and would like for your sticky navbar to let the user know what they are currently viewing on the page. Simply follow these instructions in order to enable this functionality.
First, make a list of the different elements within your page that you would like to have as ahcnor points.
If these elements do not have an "id=" attribute within the element please give them an ID and write it down.
Next, modify your stickUp code from before to look like this:
**The numbers above link the particular anchor ID with the menu item which it corresponds to in order.
itemClass: is the class of each sticky navigation menu items.
itemHover: is the class which modifies the menu item to have a different appearence while it's corrosponding anchor is in view.
I'm going to continue adding extra settings for this plugin. Please don't hesitate to make requests for features or settings that aren't natively available currently.
There are two classes that stickUp uses which you should be aware of.
.stuckMenu: This is added to the sticky div when you first initialize the plugin.
.isStuck: This is only added to the sticky div WHILE it is actually stuck, and gets removed when un-stuck.
There is currently one additional option that stickUp offers, with more to come.
marginTop: Adding this option to your stickUp element will catch the element by a margin. You could either set this to 'auto', which grabs your element's top margin, or to a custom pixel height. Here is an example of how the floating menu works on this webpage.
This would now get the margin-top value of the '.navbar-wrapper' class and use it as a margin for the scroll catcher's margin.
Setting up stickUp in Wordpress is a breeze. I am also working on development of a Wordpress Plugin version of stickUp, which will allow for an easy backend to work with and include many features.
Its exactly the same as setting it up on any other website, but here are exact instructions for Wordpress users.
Near the very bottom of the file above the '</body>' tag and below the '<?php wp_footer(); ?>' tag insert the following code.
Directly below the code that we inserted in the last step, paste the following code snippit.
Done! That element is now a sticky element. You can use the other features of the plugin on Wordpress as well, just take a look at the One Pager and Extras section of this website.
**Specifically look at the Extras feature 'marginTop' to add a margin for use with the Wordpress Toolbar, otherwise it may have a conflict.