Skip to content
Don't allow elements to scroll out of view by having them stick to the top or bottom of a window.
CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Keep in View

Copyright © 2011 - 2013, Lunatech Research B.V., C. Egor Kloos. All rights reserved.

GNU General Public License, version 3 (GPL-3.0)

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program.
If not, see

New version

I've created a new version of this script for my Front-end Patterns 2 project which is currently under development. This new version doesn't work in IE8 or lower and because of this it no longer requires jQuery to run.


Don't allow elements to scroll out of view by having them stick to the top or bottom of a window.


  • jQuery (tested with 2.0.1)


$("div").keepInView(); or $("div").keepInView({ edgeOffset: 24, zindex: 42 });

Script options

fixed: false

  • When set to true position will be fixed regardless of scroll position

edgeOffset : 0

  • Vertical offset that applies to BOTH top and bottom
  • Do not add units like px or mm. The script always assumes pixels.

zindex: 1

  • Override z-index if you can't or don't want to set this with CSS
  • Note lowercase notation of the objectname


  • When you element need to change in dimension like in an accordion or a toggled view the you can tell Keep in View to update the state of the element.


  • If you no longer need the element to remain in view you can 'unstick' it via '.trigger('unstick')'.

scrollable: false

  • Allow the element to have an scrollbar. This will automatically resize itself. See example 3.

cloned: false

  • This will clone your element so that the content doesn't reflow causing the page scroll to jump. See example 3.


customClass: false

  • Omit all jQuery positions and use your own styles with a custom CSS classname
  • The set classname will be triggered when element scrolls out of view
  • The Script will add a suffix of '-top' or '-bottom'

$("div").keepInView({ customClass: "sticky" });

Will render out either:

<div class"sticky-top"> … </div>


<div class"sticky-bottom"> … </div>

You can’t perform that action at this time.