Released a new jQuery plugin today: jQuery.stickOnScroll – makes items stick to the top of the page when the top of those elements reach the top of the viewport (window).
Yeah, there are a few techniques out there and a few plugins as well… But when I first came across the real need to implement a vertical sticky menu (in doing the SharePoint RSS Reader project), I could not find one that meet my needs and was easy to use. So I created my own.
I just got an opportunity to take the code I originally developed and made it generic. I’m starting to work on a project that will definitely need this functionality so the timing is good. The plugin does the following:
- Binds 1 function (only) to the viewport (window)
- “watches” the defined element and when it reaches the top of the viewport, it makes that element stick to the top (css position:fixed;). An offset input parameter is also available to offset the element from the top of the viewport.
- A footer element can also be defined, so that the fixed element can scroll up with the page once that footer element reaches the fixed element.
The plugin, along with full documentation can be found on github, here:
jQuery.stickOnScroll – https://github.com/purtuga/jquery.stickOnScroll
(By the way: I’m loving git and github (this is only my 2nd project on gitbub)… The ability to have sub-projects referenced from within a project is really cool. It allows me to have repository for individual plugins and bring them all into one project as a solution. If changes/enhancements are needed while working that project solution, those changes are then pushed backup to the individual sub-projects thus making them available for future projects. )
Ways that I plan to use this plugin:
- On long documentation pages, I intent to stick the section headers as the user scrolls so that they can easily identify what section the are in.
- Stick navigation areas with page anchors for the section the user is on
- Stick information relative to a set of items (ex. Description of an issue next to a list of scrolling tasks)
There are many possibilities…
Future of this plugin
Although making the items sticky (position: fixed) is cool, the ultimate goal would be to actually use position:absolute instead and thus be able to use this plugin not only on the window browser object, but on fixed height elements throughout the page as well (ex. those with a fixed height and overflow set to auto|yes). I did in fact have this working, but only for non-Internet Explorer browsers, In IE, there was a significant flashing of the element as it was re-positioned on the page which drove me (and would to anybody) mad, so I back out the functionality. I may re-visit this again in the future and look for a solution.