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 through position:fixed and iOS/Android/IE7 degrade through margin offset.
  • 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