stickUp
a jQuery plugin
A simple plugin that "sticks" an element to the top of the browser window while scrolling past it, always keeping it in view. This plugin works on multi-page sites, but has additional features for one-pager layouts.
by Liran Cohen
v0.4.5 BETA
Simple Integration
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.
The "One Pager"
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.
Open Source
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.
Updates
Beta version is available! Nov 1st, 2013
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 us if you experience any troubles. Check back often for updates on new features.
"One Pager" anchor functionality. Oct 31st, 2013
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.
In need of Margin... Oct 30th, 2013
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.
stickUp is Alive! Oct 29th, 2013
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.
Installation Instructions.
Made simple.
Download or Clone the stickUp javascript file from GitHub. Unpack it into an appropriate directory on your web sever. Make sure you also have jQuery available. If you need information about jQuery please click here.
Now include the stickUp javascript file to load within your website. Do so by inserting the following code at the end of your footer. Make sure you're pointing to the correct location of the javascript file.
Next, simply insert this code at the end of your footer under the stickUp javascript file we added in the last step. Alternitively, you could put the code into existing javascript. Replace '.navbar-wrapper' with the class of the element you would like to become sticky.
That's All!
The "One-Pager" navigation.
Try it for yourself.
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 corrosponds 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.
A little extra.
Additional settings.
We're 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.
Wordpress.
Adding functionality.
Setting up stickUp in Wordpress is a breaze. We are 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.
It's exactly the same as setting it up on any other website, but here are exact instructions for Wordpress users.
First, you must download the stickUp javascript file 'stickUp.min.js' and place it in a directory called 'js' in your theme's directory. Create this directory if it doesn't already exist. You can get the file from our GitHub.
Next, include the stickUp javascript file into Wordpress. Open the file within your teme that includes the footer. This is most likely 'footer.php' or something of that nature, depending on the theme you're using.
Near the very bottom of the file above the '</body>' tag and below the '<?php wp_footer(); ?>' tag insert the following code.
Finally, add the javascript code that enables stickUp on your Wordpress Theme. In my example I'm using the default theme 'Twenty Thirteen'. You'll have to inspect your website's CSS for the correct IDs or Classes you may need.
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.