Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

jQuery plugin to fix an element to the top of the viewport when you scroll past it

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 README.markdown
Octocat-spinner-32 jquery.fixonscroll.js
README.markdown

Basic usage

When you scroll past an element it will fix itself to the top of the browser window and scroll down with the user. When you scroll back up past its original spot, it goes back to where it started.

$('some_selector').fixOnScroll();

Workaround for iOS and mobile devices

Some mobile devices don't support the CSS 'position: fixed' property, which this plugin uses by default. To use absolute position instead, just use the positioning option:

$('some_selector').fixOnScroll({ positioning: 'absolute' });

If you want to do this automatically based on whether or not you are using iOS, here's an imperfect solution:

var pos = 'fixed';
if(navigator.userAgent.toLowerCase().match(/(iphone|ipod|ipad)/)) {
  pos = 'absolute';
}
$('some_selector').fixOnScroll({ positioning: pos });

If there's a way to detect for browser support of 'position: fixed' universally and more reliably, use that instead... and let me know so I can add it to the plugin :) There are probably other mobile browsers outside of iOS that needs this too.

Other options

You can also set the z-index value manually if scrolling the element down causes it to go behind other elements:

$('some_selector').fixOnScroll({ zIndex: 1 });

Browser support

Firefox, Chrome, Safari, Mobile Safari and ??. I haven't tested on any versions of IE, Opera or an Android browser. Would love to know if they work if anyone is kind enough to test and report back.

Examples

Check out the right sidebar of this page

Something went wrong with that request. Please try again.