Copyright © 2011 - 2013, Lunatech Research B.V., C. Egor Kloos. All rights reserved.
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 http://www.opensource.org/licenses/gpl-3.0.html
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. https://github.com/dutchcelt/FEP-KeepInView
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)
- 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.
- 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')'.
- Allow the element to have an scrollbar. This will automatically resize itself. See example 3.
- This will clone your element so that the content doesn't reflow causing the page scroll to jump. See example 3.
- 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'
Will render out either:
<div class"sticky-top"> … </div>
<div class"sticky-bottom"> … </div>