Download
User Rating: 4.3/5 ( 2 votes)
ScrollFix is a jQuery plugin for making an element fixed when it goes out of view.
Features
-
detecting when an element goes out of view and making it fixed
-
replacing the element with an invisible clone that will temporarily occupy the original spot
-
updating size and position of the fixed element
Browser support
Tested in Mozilla Firefox, Google Chrome, Safari, Opera and MSIE 7+
Source: github.com
1. INCLUDE JS FILES
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="src/scrollfix.js"></script>
2. HTML
<div id="wrapper">
<div id="header">
<h1>ScrollFix demo</h1>
<p>Try scrolling vertically, resizing the window and scrolling horizontally.</p>
</div>
<div id="bar">
Lorem ipsum dolor sit amet.
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet consectetuer elit pretium enim feugiat fringilla. A massa consectetuer eget suscipit laoreet rhoncus consequat Aliquam risus mauris. A tortor justo eu sodales ante convallis Vivamus vestibulum ullamcorper at. Et Vestibulum ultrices iaculis orci amet consequat commodo morbi id Vestibulum. Mauris mauris ut velit aliquet augue turpis vitae nulla vel et. Lacinia Curabitur Vivamus Nulla nibh vel orci dui tellus sit metus. Ipsum tortor sit nisl dapibus ligula Morbi consequat pellentesque pede sit. Ut nec vitae orci turpis Quisque Donec vestibulum elit ut ut. Interdum magnis elit dolor pretium sed molestie risus enim neque volutpat. Urna lacinia In eu id Quisque Lorem molestie felis nisl Phasellus. Lacinia Curabitur adipiscing accumsan felis cursus eget Nunc augue eget pellentesque. Nam ante elit metus Curabitur elit nunc lorem nunc enim orci. Hendrerit feugiat sem libero elit et felis justo nibh tristique Curabitur. Neque nisl.</p>
....
</div>
</div>
3. JAVASCRIPT
$('#bar').scrollFix();
4. OPTIONS
The plugin provides a single jQuery method you can use:
$(element).scrollFix([options])
-
element - element that will be fixed
-
options - object with various settings (see list below)
Returns: an instance of Shira.ScrollFix.Watcher or false if no element was given / matched.
Options
|
Name |
Default |
Description |
|
fixClass |
"scroll-fix" |
Class added to the element when it is fixed. |
|
syncSize |
true |
Update element's size when it is fixed. |
|
syncPosition |
true |
Update element's position when it is fixed. |
|
fixOffset |
0 |
Offset aplied when detecting whether to fix the element. |
|
unfixOffset |
0 |
Offset aplied when detecting whether to unfix the element. |
|
onUpdateFixed |
null |
Custom function to call when the fixed element is updated. The function is passed an instance of Shira.ScrollFix.Watcher. |
JS Tutorial
