Conditional Fixed Positioning with jQuery
Many websites use CSS fixed positioning to pin elements to the top or bottom of a webpage so they never scroll out of view. This technique is commonly used for navigation elements on sites that require the user to scroll through many screenfuls of information on a single page.
I put together a demo that conditionally applies fixed positioning to a side navigation element when it scrolls to the top of the browser window.
This demo adds/removes position:fixed styling to/from the side navigation based on the current vertical position of the window’s scroll bar. It also attempts to solve some of the problems with using conditional fixed positioning in the real world.
This technique requires executing code every time the user scrolls the page. It is generally a bad idea to attach code directly to the window scroll event since it can fire a lot in a short period of time. John Resig describes this problem and a couple work arounds in his blog post “Learning from Twitter”: https://johnresig.com/blog/learning-from-twitter/
Luckily “Cowboy” Ben Alman has an easy to use jQuery plugin that solves this problem by throttling the scroll event. You can read about and download Ben’s plugin here: http://benalman.com/projects/jquery-throttle-debounce-plugin/“. With this plugin you can specify how much to delay the execution of your code that’s attached to the scroll event:
If your browser window is smaller than the width of the website a horizontal scrollbar will appear. This horizontal scrollbar will cause your fixed position element to float over and hide other content on the page. Here is a screenshot of this problem:
To fix this issue with the horizontal scrollbar you need to check and see if the user has horizontally scrolled the page and if so update the left css property of the fixed element. Here is the code I used to keep the fixed side navigation aligned:
Fixed positioning is not available in IE6 or in any version of IE if you’re stuck using the quirks mode doctype. There is a work around that involves wrapping all of your elements in a div except for the fixed positioned element and applying absolute positioning to it to make it appear fixed. You can read about this IE6 fixed positioning hack here: http://www.howtocreate.co.uk/fixedPosition.html
However, this IE fixed positioning hack has a couple drawbacks. It requires setting the height and width of the body element to 100% and disabling the default browser scroll bars. This essentially hides the browser window object and replaces it with a fullscreen div tag. When testing this technique I came across a couple problems with it:
You can not scroll the webpage with the keyboard by default. Instead the fullscreen div has to be given focus by tabbing to it or clicking on it in order to use the up and down arrow keys to scroll the page.
The jQuery scrolltop() method is commonly used by many jQuery plugins to get the current height of the browser’s vertical scrollbar. Since this scrollbar is disabled the $(window).scrollTop() method will always return zero. For example, the Fancybox plugin will not work with this fixed positioning hack.
Due to these problems and the fact that IE 6 is incredibly old I would recommend not using this hack. In IE 6 fixed positioning defaults to absolute positioning which can really screw up your page. So you can disable the fixed positioning js code for IE 6 using feature detection.
This css fixed positioning test works great for IE 6 but it doesn’t appear to work with iOS and Android. Argh… :(
Fixed positioning is technically supported on mobile safari but it doesn’t work like the way it does on desktop browsers. You can read more about this problem on the Apple Developer site here: https://developer.apple.com/library/content/technotes/tn2010/tn2262/_index.html#//apple_ref/doc/uid/DTS40009577-CH1-SAFARI_ON_IPAD_READINESS_CHECKLIST-4__MODIFY_CODE_THAT_RELIES_ON_CSS_FIXED_POSITIONING
Here is how fixed positioning displays in the demo on my iPad before I disabled it by checking the user agent string for iOS devices (notice how the fixed side navigation jumped halfway off the screen instead of floating at the top of the the viewport):
Unfortunately fixed positioning has made it to Modernizr’s list of undetectables due to this issue. To disable the fixed positioning js code on iOS and Android we are forced to do resort to sniffing the user agent string to check for these devices. I found the following gist which contains custom Modrenizr tests to check for fixed position support and does ua sniffing for iOS devices: https://gist.github.com/855078/109ded4b4dab65048a1e7b4f4bd94c93cebb26b8. My demo uses this gist to check for fixed position support. iOS 5 will supposedly have proper support for fixed positioning so hopefully fixed positioning won’t be a problem with mobile devices in the future.
If you don’t want to use browser sniffing and want your fixed positioning element to fail a bit more gracefully there is another option. You could duplicate the markup for the element you want to be conditionally fixed positioned. Then just show/hide the fixed position version of the element based on the scrollbar position. This will still cause the fixed position element to jump offscreen when it is displayed on an iOS device but the original static positioned version of the element will remain in the document flow and will make the issue less noticeable. Check out the source code on Khan Academy’s site and you will see that this is how they implement their conditional fixed positioned menu.
And if you really want to get fixed positioning working on your mobile device then try using the iScroll js library. Check it out here to see if it will work for your project: http://cubiq.org/iscroll-4
jQuery makes it easy to conditionally add fixed positioning to elements. Just make sure to consider performance when working with the scroll event and this technique will work great on desktop browsers. But there is still a lack of support for fixed positioning on mobile devices and it is frustrating to deal with. Hopefully this post will help you decide if conditional fixed positioning is right for your project.