Description

Allow elements to stick within viewport when scrolling. Toggles position: fixed only after scrolling the viewport. Degrades nicely on mobile and tablet browsers.

Replicates the (future) prososed CSS position: sticky.

Download

Support

  • Doesn't overflow footer because footer pushes elements up.
  • Doesn't need any hardcoded CSS tricks.
  • All major browsers support through CSS position: fixed and iOS/Android/IE7 degrade nicely using dynamic offset margin.
  • Fixes tablet and mobile zoom issue with fixed
  • Offset position from top and bottom within scrolled viewport.
  • Super light weight: 2.6kb uncompressed.
  • Div layout structure can be floats or position: absolute support.

Code

   $.lockfixed("#sidebar .menu",{offset: {top: 10, bottom: 100}});

Demo

Config

   $.lockfixed(el,config);

el: jQuery selector

config: object

config.offset.top: pixels offset from top in viewport scrolled

config.offset.bottom: pixels from bottom. where to end the stay in viewport(usually height of the footer)

config.forcemargin = true: ignores position: static

If your DOM updates with a new height (for example you have unlimited scroll) you have to trigger the event lockfixed:pageupdate to update the script with the new viewport dimensions. See demo

Important for Firefox is to add CSS (prefix) box-sizing: border-box to the DOM element.