├── README.md
├── bower.json
├── jquery-scrolltofixed-min.js
├── jquery-scrolltofixed.js
├── license.txt
├── package.json
├── test-min.html
├── test.html
└── tests
    ├── basic.html
    ├── bounding_box.html
    ├── box_sizing_border_box.html
    ├── fake_centering.html
    ├── horizontal_scroll.html
    ├── position_absolute.html
    ├── position_absolute_in_relative.html
    ├── position_absolute_margin.html
    ├── position_top_arg.html
    └── position_with_floats.html


/README.md:
--------------------------------------------------------------------------------
  1 | **Demo**: https://bigspotteddog.github.io/ScrollToFixed/
  2 | 
  3 | *More [fiddle](http://jsfiddle.net/) demo links [below](#demos).*
  4 | 
  5 | ScrollToFixed
  6 | ==========================
  7 | 
  8 | This jQuery plugin is used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.
  9 | 
 10 | Given an option marginTop, the element will stop moving vertically upward once the vertical scroll has reached the target position; but, the element will still move horizontally as the page is scrolled left or right. Once the page has been scrolled back down past the target position, the element will be restored to its original position on the page.
 11 | 
 12 | This plugin has been tested in Firefox 3+, Google Chrome 10+, Safari 5+, Internet Explorer 8/9, and Opera 11.60+.
 13 | 
 14 | This plugin was inspired by the excellent tutorial presented by Remy Sharp, titled "Fixed Floating Elements". You will find that tutorial [here](http://jqueryfordesigners.com/fixed-floating-elements/).
 15 | 
 16 | ## Notices ##
 17 | 
 18 | **IMPORTANT**: The latest version of this plugin reverts the offset adjustment code that added the difference between the left offset and position to the left offset.  For anyone that needed it, that code is now turned on by using the **offsets: true** option.
 19 | 
 20 | **UPDATE**: A new option 'dontCheckForPositionFixedSupport' was added to disable the check for position:fixed support. Some iOS and Android vesions now support position:fixed; we attempt to detect support and continue instantiating the plugin if supported.
 21 | 
 22 | **UPDATE**: The fixed position support detection (above) is now turned off completely.
 23 | 
 24 | **UPDATE**: The "remove" trigger was renamed as "detach" to avoid the new Google Chrome (24) native "remove" method.
 25 | 
 26 | **UPDATE**: The 'dontCheckForPositionFixedSupport' option was commented out as it did not accurately detect support.
 27 | 
 28 | **UPDATE**: A new option was added by [murb](https://github.com/murb), 'dontSetWidth', for box-sizing: border-box that does not set the width on the target element when it goes fixed or absolute.
 29 | 
 30 | ## Usage ##
 31 | 
 32 | Default options:
 33 | 
 34 | ```javascript
 35 | $(document).ready(function() {
 36 |   $('#mydiv').scrollToFixed();
 37 | });
 38 | ```
 39 | 
 40 | Margin and Limit options:
 41 | 
 42 | ```javascript
 43 | $(document).ready(function() {
 44 |   $('#cart').scrollToFixed({ marginTop: 10, limit: $($('h2')[5]).offset().top });
 45 | });
 46 | ```
 47 | 
 48 | Fixed Header and Fixed Footer with a Limit
 49 | 
 50 | ```javascript
 51 | // The fixed footer will go unfixed to reveal whatever is below it when scrolled
 52 | // past the limit.
 53 | $(document).ready(function() {
 54 |   $('.header').scrollToFixed();
 55 |   $('.footer').scrollToFixed( { bottom: 0, limit: $('.footer').offset().top } );
 56 | });
 57 | ```
 58 | 
 59 | Very Full Example
 60 | 
 61 | ```javascript
 62 | $(document).ready(function() {
 63 |     $('.header').scrollToFixed({
 64 |         preFixed: function() { $(this).find('h1').css('color', 'blue'); },
 65 |         postFixed: function() { $(this).find('h1').css('color', ''); }
 66 |     });
 67 | 
 68 |     $('.footer').scrollToFixed( {
 69 |         bottom: 0,
 70 |         limit: $('.footer').offset().top,
 71 |         preFixed: function() { $(this).find('h1').css('color', 'blue'); },
 72 |         postFixed: function() { $(this).find('h1').css('color', ''); }
 73 |     });
 74 | 
 75 |     // Order matters because our summary limit is based on the position
 76 |     // of the footer.  On window refresh, the summary needs to recalculate
 77 |     // after the footer.
 78 |     $('#summary').scrollToFixed({
 79 |         marginTop: $('.header').outerHeight() + 10,
 80 |         limit: function() {
 81 |             var limit = $('.footer').offset().top - $('#summary').outerHeight(true) - 10;
 82 |             return limit;
 83 |         },
 84 |         zIndex: 999,
 85 |         preFixed: function() { $(this).find('.title').css('color', 'blue'); },
 86 |         preAbsolute: function() { $(this).find('.title').css('color', 'red'); },
 87 |         postFixed: function() { $(this).find('.title').css('color', ''); },
 88 |         postAbsolute: function() { $(this).find('.title').css('color', ''); }
 89 |     });
 90 | });
 91 | ```
 92 | 
 93 | ```javascript
 94 | // returns whether or not the ScrollToFixed plugin has been applied to the element.
 95 | var b = $.isScrollToFixed('.header');
 96 | ```
 97 | 
 98 | ## Triggers ##
 99 | 
100 | ```javascript
101 |   $('.header').trigger('detach.ScrollToFixed'); // Removes scrollToFixed from the element.  The
102 |                                                 // namespace ensures remove will not be called
103 |                                                 // on other plugins that may be listening for
104 |                                                 // that event!  NOTE: Renamed as "detach" to
105 |                                                 // avoid the new Chrome native "remove" method.
106 | 
107 |   $('.header').trigger('resize'); // Resizes the spacer in case the fixed element height changes.
108 |                                   // Good for size changes to the fixed element.
109 | 
110 |   $(window).scroll(); // Causes the plugin to recalculate the window scoll.
111 |                       // Good for layout changes that could change the fixed element's response to
112 |                       // the scroll.  Example: the fixed element height expands which should cause
113 |                       // it to invoke its limit.
114 | 
115 |   $(window).resize(); // Causes the plugin to recalculate the element offsets, then the window scroll.
116 |                       // Good for layout changes that could cause the fixed element to move.
117 |                       // Example: the header height increases which should cause the fixed
118 |                       // element to fix at a greater vertical scroll position.
119 | ```
120 | 
121 | ## Options ##
122 | 
123 | * __marginTop__ (value|function) - the number of pixels between the top of the window and the fixed element.
124 | * __limit__ (value|function) - the vertical scroll position at which the element will begin to scroll up the page (absolutely).
125 | * __bottom__ - (fix to bottom) the number of pixels between the bottom of the window and the bottom of the fixed element.
126 | * __zIndex__ - the z-index of the fixed element.
127 | * __spacerClass__ - the class to add to the spacer for styling purposes.
128 | * __preFixed__ - the function handler triggered just before the element goes fixed.
129 | * __fixed__ - the function handler triggered just after the element goes fixed.
130 | * __postFixed__ - the function handler triggered just after the element leaves fixed.
131 | * __preUnfixed__ - the function handler triggered just before the element goes unfixed.
132 | * __unfixed__ - the function handler triggered just after the element goes unfixed.
133 | * __postUnfixed__ - the function handler triggered just after the element leaves unfixed.
134 | * __preAbsolute__ - the function handler triggered just before the element goes absolute.
135 | * __postAbsolute__ - the function handler triggered just after the element leaves absolute.
136 | * __offsets__ - (true|false|not present) some websites have needed an adjustment to the left position of the element due to something in their layout.  This option turns this adjustment on.
137 | * __minWidth__ (number) - the minimum width the window must be to "fix" the target element.  Turns off the functionaility when the window width is less than specified.
138 | * __maxWidth__ (number) - the maximum width the window must be to "fix" the target element.  Turns off the functionaility when the window width is more than specified.
139 | * __dontCheckForPositionFixedSupport__ - (true|false|not present) some devices do not support position fixed; we check to see if it does.  This option turns off that check if set to true.
140 | * __dontSetWidth__ - (true|false|not set) box sizing that does not set the width on the target element when it goes fixed or absolute.
141 | * __removeOffsets__ - (true|false|not set) recalculate top offset and delete left offset when the element goes absolute.
142 | 
143 | ## Demos ##
144 | 
145 | * http://jsfiddle.net/y3qV5/434/ - floating cart summary with a limit.
146 | * http://jsfiddle.net/k2R3G/81/  - fixed header; allows content to flow under it.
147 | * http://jsfiddle.net/ZczEt/167/ - very full example: fixed header, footer and floating summary, with events.
148 | * http://jsfiddle.net/y3qV5/435/ - 2 cart summaries that scroll up and stop at different intervals.
149 | * http://jsfiddle.net/y3qV5/769/ - Another multi-cart example using floats, with section stops.
150 | * http://jsfiddle.net/ZZYpG/68/   - Endlessly scrolling date markers.
151 | * http://jsfiddle.net/y3qV5/1730/ - Yahoo's new sidebar.
152 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ScrollToFixed",
 3 |   "version": "1.0.8",
 4 |   "homepage": "http://bigspotteddog.github.io/ScrollToFixed/",
 5 |   "description": "jQuery plugin used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.",
 6 |   "main": "jquery-scrolltofixed.js",
 7 |   "dependencies": {
 8 |     "jquery": ">=1.6"
 9 |   },
10 |   "keywords": [
11 |     "jQuery", "scroll", "fixed"
12 |   ],
13 |   "license": "MIT",
14 |   "ignore": [
15 |     "**/.*",
16 |     "bower_components",
17 |     "tests",
18 |     "test*.html"
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/jquery-scrolltofixed-min.js:
--------------------------------------------------------------------------------
1 | (function(a){a.isScrollToFixed=function(b){return !!a(b).data("ScrollToFixed")};a.ScrollToFixed=function(d,i){var m=this;m.$el=a(d);m.el=d;m.$el.data("ScrollToFixed",m);var c=false;var H=m.$el;var I;var F;var k;var e;var z;var E=0;var r=0;var j=-1;var f=-1;var u=null;var A;var g;function v(){H.trigger("preUnfixed.ScrollToFixed");l();H.trigger("unfixed.ScrollToFixed");f=-1;E=H.offset().top;r=H.offset().left;if(m.options.offsets){r+=(H.offset().left-H.position().left)}if(j==-1){j=r}I=H.css("position");c=true;if(m.options.bottom!=-1){H.trigger("preFixed.ScrollToFixed");x();H.trigger("fixed.ScrollToFixed")}}function o(){var J=m.options.limit;if(!J){return 0}if(typeof(J)==="function"){return J.apply(H)}return J}function q(){return I==="fixed"}function y(){return I==="absolute"}function h(){return !(q()||y())}function x(){if(!q()){var J=H[0].getBoundingClientRect();u.css({display:H.css("display"),width:J.width,height:J.height,"float":H.css("float")});cssOptions={"z-index":m.options.zIndex,position:"fixed",top:m.options.bottom==-1?t():"",bottom:m.options.bottom==-1?"":m.options.bottom,"margin-left":"0px"};if(!m.options.dontSetWidth){cssOptions.width=H.css("width")}H.css(cssOptions);H.addClass(m.options.baseClassName);if(m.options.className){H.addClass(m.options.className)}I="fixed"}}function b(){var K=o();var J=r;if(m.options.removeOffsets){J="";K=K-E}cssOptions={position:"absolute",top:K,left:J,"margin-left":"0px",bottom:""};if(!m.options.dontSetWidth){cssOptions.width=H.css("width")}H.css(cssOptions);I="absolute"}function l(){if(!h()){f=-1;u.css("display","none");H.css({"z-index":z,width:"",position:F,left:"",top:e,"margin-left":""});H.removeClass("scroll-to-fixed-fixed");if(m.options.className){H.removeClass(m.options.className)}I=null}}function w(J){if(J!=f){H.css("left",r-J);f=J}}function t(){var J=m.options.marginTop;if(!J){return 0}if(typeof(J)==="function"){return J.apply(H)}return J}function B(){if(!a.isScrollToFixed(H)||H.is(":hidden")){return}var M=c;var L=h();if(!c){v()}else{if(h()){E=H.offset().top;r=H.offset().left}}var J=a(window).scrollLeft();var N=a(window).scrollTop();var K=o();if(m.options.minWidth&&a(window).width()<m.options.minWidth){if(!h()||!M){p();H.trigger("preUnfixed.ScrollToFixed");l();H.trigger("unfixed.ScrollToFixed")}}else{if(m.options.maxWidth&&a(window).width()>m.options.maxWidth){if(!h()||!M){p();H.trigger("preUnfixed.ScrollToFixed");l();H.trigger("unfixed.ScrollToFixed")}}else{if(m.options.bottom==-1){if(K>0&&N>=K-t()){if(!L&&(!y()||!M)){p();H.trigger("preAbsolute.ScrollToFixed");b();H.trigger("unfixed.ScrollToFixed")}}else{if(N>=E-t()){if(!q()||!M){p();H.trigger("preFixed.ScrollToFixed");x();f=-1;H.trigger("fixed.ScrollToFixed")}w(J)}else{if(!h()||!M){p();H.trigger("preUnfixed.ScrollToFixed");l();H.trigger("unfixed.ScrollToFixed")}}}}else{if(K>0){if(N+a(window).height()-H.outerHeight(true)>=K-(t()||-n())){if(q()){p();H.trigger("preUnfixed.ScrollToFixed");if(F==="absolute"){b()}else{l()}H.trigger("unfixed.ScrollToFixed")}}else{if(!q()){p();H.trigger("preFixed.ScrollToFixed");x()}w(J);H.trigger("fixed.ScrollToFixed")}}else{w(J)}}}}}function n(){if(!m.options.bottom){return 0}return m.options.bottom}function p(){var J=H.css("position");if(J=="absolute"){H.trigger("postAbsolute.ScrollToFixed")}else{if(J=="fixed"){H.trigger("postFixed.ScrollToFixed")}else{H.trigger("postUnfixed.ScrollToFixed")}}}var D=function(J){if(H.is(":visible")){c=false;B()}else{l()}};var G=function(J){(!!window.requestAnimationFrame)?requestAnimationFrame(B):B()};var C=function(){var K=document.body;if(document.createElement&&K&&K.appendChild&&K.removeChild){var M=document.createElement("div");if(!M.getBoundingClientRect){return null}M.innerHTML="x";M.style.cssText="position:fixed;top:100px;";K.appendChild(M);var N=K.style.height,O=K.scrollTop;K.style.height="3000px";K.scrollTop=500;var J=M.getBoundingClientRect().top;K.style.height=N;var L=(J===100);K.removeChild(M);K.scrollTop=O;return L}return null};var s=function(J){J=J||window.event;if(J.preventDefault){J.preventDefault()}J.returnValue=false};m.init=function(){m.options=a.extend({},a.ScrollToFixed.defaultOptions,i);z=H.css("z-index");m.$el.css("z-index",m.options.zIndex);u=a("<div />");I=H.css("position");F=H.css("position");k=H.css("float");e=H.css("top");if(h()){m.$el.after(u)}a(window).bind("resize.ScrollToFixed",D);a(window).bind("scroll.ScrollToFixed",G);if("ontouchmove" in window){a(window).bind("touchmove.ScrollToFixed",B)}if(m.options.preFixed){H.bind("preFixed.ScrollToFixed",m.options.preFixed)}if(m.options.postFixed){H.bind("postFixed.ScrollToFixed",m.options.postFixed)}if(m.options.preUnfixed){H.bind("preUnfixed.ScrollToFixed",m.options.preUnfixed)}if(m.options.postUnfixed){H.bind("postUnfixed.ScrollToFixed",m.options.postUnfixed)}if(m.options.preAbsolute){H.bind("preAbsolute.ScrollToFixed",m.options.preAbsolute)}if(m.options.postAbsolute){H.bind("postAbsolute.ScrollToFixed",m.options.postAbsolute)}if(m.options.fixed){H.bind("fixed.ScrollToFixed",m.options.fixed)}if(m.options.unfixed){H.bind("unfixed.ScrollToFixed",m.options.unfixed)}if(m.options.spacerClass){u.addClass(m.options.spacerClass)}H.bind("resize.ScrollToFixed",function(){u.height(H.height())});H.bind("scroll.ScrollToFixed",function(){H.trigger("preUnfixed.ScrollToFixed");l();H.trigger("unfixed.ScrollToFixed");B()});H.bind("detach.ScrollToFixed",function(J){s(J);H.trigger("preUnfixed.ScrollToFixed");l();H.trigger("unfixed.ScrollToFixed");a(window).unbind("resize.ScrollToFixed",D);a(window).unbind("scroll.ScrollToFixed",G);H.unbind(".ScrollToFixed");u.remove();m.$el.removeData("ScrollToFixed")});D()};m.init()};a.ScrollToFixed.defaultOptions={marginTop:0,limit:0,bottom:-1,zIndex:1000,baseClassName:"scroll-to-fixed-fixed"};a.fn.scrollToFixed=function(b){return this.each(function(){(new a.ScrollToFixed(this,b))})}})(jQuery);


--------------------------------------------------------------------------------
/jquery-scrolltofixed.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * ScrollToFixed
  3 |  * https://github.com/bigspotteddog/ScrollToFixed
  4 |  *
  5 |  * Copyright (c) 2011 Joseph Cava-Lynch
  6 |  * MIT license
  7 |  */
  8 | (function($) {
  9 |     $.isScrollToFixed = function(el) {
 10 |         return !!$(el).data('ScrollToFixed');
 11 |     };
 12 | 
 13 |     $.ScrollToFixed = function(el, options) {
 14 |         // To avoid scope issues, use 'base' instead of 'this' to reference this
 15 |         // class from internal events and functions.
 16 |         var base = this;
 17 | 
 18 |         // Access to jQuery and DOM versions of element.
 19 |         base.$el = $(el);
 20 |         base.el = el;
 21 | 
 22 |         // Add a reverse reference to the DOM object.
 23 |         base.$el.data('ScrollToFixed', base);
 24 | 
 25 |         // A flag so we know if the scroll has been reset.
 26 |         var isReset = false;
 27 | 
 28 |         // The element that was given to us to fix if scrolled above the top of
 29 |         // the page.
 30 |         var target = base.$el;
 31 | 
 32 |         var position;
 33 |         var originalPosition;
 34 |         var originalFloat;
 35 |         var originalOffsetTop;
 36 |         var originalZIndex;
 37 | 
 38 |         // The offset top of the element when resetScroll was called. This is
 39 |         // used to determine if we have scrolled past the top of the element.
 40 |         var offsetTop = 0;
 41 | 
 42 |         // The offset left of the element when resetScroll was called. This is
 43 |         // used to move the element left or right relative to the horizontal
 44 |         // scroll.
 45 |         var offsetLeft = 0;
 46 |         var originalOffsetLeft = -1;
 47 | 
 48 |         // This last offset used to move the element horizontally. This is used
 49 |         // to determine if we need to move the element because we would not want
 50 |         // to do that for no reason.
 51 |         var lastOffsetLeft = -1;
 52 | 
 53 |         // This is the element used to fill the void left by the target element
 54 |         // when it goes fixed; otherwise, everything below it moves up the page.
 55 |         var spacer = null;
 56 | 
 57 |         var spacerClass;
 58 | 
 59 |         var className;
 60 | 
 61 |         // Capture the original offsets for the target element. This needs to be
 62 |         // called whenever the page size changes or when the page is first
 63 |         // scrolled. For some reason, calling this before the page is first
 64 |         // scrolled causes the element to become fixed too late.
 65 |         function resetScroll() {
 66 |             // Set the element to it original positioning.
 67 |             target.trigger('preUnfixed.ScrollToFixed');
 68 |             setUnfixed();
 69 |             target.trigger('unfixed.ScrollToFixed');
 70 | 
 71 |             // Reset the last offset used to determine if the page has moved
 72 |             // horizontally.
 73 |             lastOffsetLeft = -1;
 74 | 
 75 |             // Capture the offset top of the target element.
 76 |             offsetTop = target.offset().top;
 77 | 
 78 |             // Capture the offset left of the target element.
 79 |             offsetLeft = target.offset().left;
 80 | 
 81 |             // If the offsets option is on, alter the left offset.
 82 |             if (base.options.offsets) {
 83 |                 offsetLeft += (target.offset().left - target.position().left);
 84 |             }
 85 | 
 86 |             if (originalOffsetLeft == -1) {
 87 |                 originalOffsetLeft = offsetLeft;
 88 |             }
 89 | 
 90 |             position = target.css('position');
 91 | 
 92 |             // Set that this has been called at least once.
 93 |             isReset = true;
 94 | 
 95 |             if (base.options.bottom != -1) {
 96 |                 target.trigger('preFixed.ScrollToFixed');
 97 |                 setFixed();
 98 |                 target.trigger('fixed.ScrollToFixed');
 99 |             }
100 |         }
101 | 
102 |         function getLimit() {
103 |             var limit = base.options.limit;
104 |             if (!limit) return 0;
105 | 
106 |             if (typeof(limit) === 'function') {
107 |                 return limit.apply(target);
108 |             }
109 |             return limit;
110 |         }
111 | 
112 |         // Returns whether the target element is fixed or not.
113 |         function isFixed() {
114 |             return position === 'fixed';
115 |         }
116 | 
117 |         // Returns whether the target element is absolute or not.
118 |         function isAbsolute() {
119 |             return position === 'absolute';
120 |         }
121 | 
122 |         function isUnfixed() {
123 |             return !(isFixed() || isAbsolute());
124 |         }
125 | 
126 |         // Sets the target element to fixed. Also, sets the spacer to fill the
127 |         // void left by the target element.
128 |         function setFixed() {
129 |             // Only fix the target element and the spacer if we need to.
130 |             if (!isFixed()) {
131 |                 //get REAL dimensions (decimal fix)
132 |                 //Ref. http://stackoverflow.com/questions/3603065/how-to-make-jquery-to-not-round-value-returned-by-width
133 |                 var dimensions = target[0].getBoundingClientRect();
134 | 
135 |                 // Set the spacer to fill the height and width of the target
136 |                 // element, then display it.
137 |                 spacer.css({
138 |                     'display' : target.css('display'),
139 |                     'width' : dimensions.width,
140 |                     'height' : dimensions.height,
141 |                     'float' : target.css('float')
142 |                 });
143 | 
144 |                 // Set the target element to fixed and set its width so it does
145 |                 // not fill the rest of the page horizontally. Also, set its top
146 |                 // to the margin top specified in the options.
147 | 
148 |                 cssOptions={
149 |                     'z-index' : base.options.zIndex,
150 |                     'position' : 'fixed',
151 |                     'top' : base.options.bottom == -1?getMarginTop():'',
152 |                     'bottom' : base.options.bottom == -1?'':base.options.bottom,
153 |                     'margin-left' : '0px'
154 |                 }
155 |                 if (!base.options.dontSetWidth){ cssOptions['width']=target.css('width'); };
156 | 
157 |                 target.css(cssOptions);
158 | 
159 |                 target.addClass(base.options.baseClassName);
160 | 
161 |                 if (base.options.className) {
162 |                     target.addClass(base.options.className);
163 |                 }
164 | 
165 |                 position = 'fixed';
166 |             }
167 |         }
168 | 
169 |         function setAbsolute() {
170 | 
171 |             var top = getLimit();
172 |             var left = offsetLeft;
173 | 
174 |             if (base.options.removeOffsets) {
175 |                 left = '';
176 |                 top = top - offsetTop;
177 |             }
178 | 
179 |             cssOptions={
180 |               'position' : 'absolute',
181 |               'top' : top,
182 |               'left' : left,
183 |               'margin-left' : '0px',
184 |               'bottom' : ''
185 |             }
186 |             if (!base.options.dontSetWidth){ cssOptions['width']=target.css('width'); };
187 | 
188 |             target.css(cssOptions);
189 | 
190 |             position = 'absolute';
191 |         }
192 | 
193 |         // Sets the target element back to unfixed. Also, hides the spacer.
194 |         function setUnfixed() {
195 |             // Only unfix the target element and the spacer if we need to.
196 |             if (!isUnfixed()) {
197 |                 lastOffsetLeft = -1;
198 | 
199 |                 // Hide the spacer now that the target element will fill the
200 |                 // space.
201 |                 spacer.css('display', 'none');
202 | 
203 |                 // Remove the style attributes that were added to the target.
204 |                 // This will reverse the target back to the its original style.
205 |                 target.css({
206 |                     'z-index' : originalZIndex,
207 |                     'width' : '',
208 |                     'position' : originalPosition,
209 |                     'left' : '',
210 |                     'top' : originalOffsetTop,
211 |                     'margin-left' : ''
212 |                 });
213 | 
214 |                 target.removeClass('scroll-to-fixed-fixed');
215 | 
216 |                 if (base.options.className) {
217 |                     target.removeClass(base.options.className);
218 |                 }
219 | 
220 |                 position = null;
221 |             }
222 |         }
223 | 
224 |         // Moves the target element left or right relative to the horizontal
225 |         // scroll position.
226 |         function setLeft(x) {
227 |             // Only if the scroll is not what it was last time we did this.
228 |             if (x != lastOffsetLeft) {
229 |                 // Move the target element horizontally relative to its original
230 |                 // horizontal position.
231 |                 target.css('left', offsetLeft - x);
232 | 
233 |                 // Hold the last horizontal position set.
234 |                 lastOffsetLeft = x;
235 |             }
236 |         }
237 | 
238 |         function getMarginTop() {
239 |             var marginTop = base.options.marginTop;
240 |             if (!marginTop) return 0;
241 | 
242 |             if (typeof(marginTop) === 'function') {
243 |                 return marginTop.apply(target);
244 |             }
245 |             return marginTop;
246 |         }
247 | 
248 |         // Checks to see if we need to do something based on new scroll position
249 |         // of the page.
250 |         function checkScroll() {
251 |             if (!$.isScrollToFixed(target) || target.is(':hidden')) return;
252 |             var wasReset = isReset;
253 |             var wasUnfixed = isUnfixed();
254 | 
255 |             // If resetScroll has not yet been called, call it. This only
256 |             // happens once.
257 |             if (!isReset) {
258 |                 resetScroll();
259 |             } else if (isUnfixed()) {
260 |                 // if the offset has changed since the last scroll,
261 |                 // we need to get it again.
262 | 
263 |                 // Capture the offset top of the target element.
264 |                 offsetTop = target.offset().top;
265 | 
266 |                 // Capture the offset left of the target element.
267 |                 offsetLeft = target.offset().left;
268 |             }
269 | 
270 |             // Grab the current horizontal scroll position.
271 |             var x = $(window).scrollLeft();
272 | 
273 |             // Grab the current vertical scroll position.
274 |             var y = $(window).scrollTop();
275 | 
276 |             // Get the limit, if there is one.
277 |             var limit = getLimit();
278 | 
279 |             // If the vertical scroll position, plus the optional margin, would
280 |             // put the target element at the specified limit, set the target
281 |             // element to absolute.
282 |             if (base.options.minWidth && $(window).width() < base.options.minWidth) {
283 |                 if (!isUnfixed() || !wasReset) {
284 |                     postPosition();
285 |                     target.trigger('preUnfixed.ScrollToFixed');
286 |                     setUnfixed();
287 |                     target.trigger('unfixed.ScrollToFixed');
288 |                 }
289 |             } else if (base.options.maxWidth && $(window).width() > base.options.maxWidth) {
290 |                 if (!isUnfixed() || !wasReset) {
291 |                     postPosition();
292 |                     target.trigger('preUnfixed.ScrollToFixed');
293 |                     setUnfixed();
294 |                     target.trigger('unfixed.ScrollToFixed');
295 |                 }
296 |             } else if (base.options.bottom == -1) {
297 |                 // If the vertical scroll position, plus the optional margin, would
298 |                 // put the target element at the specified limit, set the target
299 |                 // element to absolute.
300 |                 if (limit > 0 && y >= limit - getMarginTop()) {
301 |                     if (!wasUnfixed && (!isAbsolute() || !wasReset)) {
302 |                         postPosition();
303 |                         target.trigger('preAbsolute.ScrollToFixed');
304 |                         setAbsolute();
305 |                         target.trigger('unfixed.ScrollToFixed');
306 |                     }
307 |                 // If the vertical scroll position, plus the optional margin, would
308 |                 // put the target element above the top of the page, set the target
309 |                 // element to fixed.
310 |                 } else if (y >= offsetTop - getMarginTop()) {
311 |                     if (!isFixed() || !wasReset) {
312 |                         postPosition();
313 |                         target.trigger('preFixed.ScrollToFixed');
314 | 
315 |                         // Set the target element to fixed.
316 |                         setFixed();
317 | 
318 |                         // Reset the last offset left because we just went fixed.
319 |                         lastOffsetLeft = -1;
320 | 
321 |                         target.trigger('fixed.ScrollToFixed');
322 |                     }
323 |                     // If the page has been scrolled horizontally as well, move the
324 |                     // target element accordingly.
325 |                     setLeft(x);
326 |                 } else {
327 |                     // Set the target element to unfixed, placing it where it was
328 |                     // before.
329 |                     if (!isUnfixed() || !wasReset) {
330 |                         postPosition();
331 |                         target.trigger('preUnfixed.ScrollToFixed');
332 |                         setUnfixed();
333 |                         target.trigger('unfixed.ScrollToFixed');
334 |                     }
335 |                 }
336 |             } else {
337 |                 if (limit > 0) {
338 |                     if (y + $(window).height() - target.outerHeight(true) >= limit - (getMarginTop() || -getBottom())) {
339 |                         if (isFixed()) {
340 |                             postPosition();
341 |                             target.trigger('preUnfixed.ScrollToFixed');
342 | 
343 |                             if (originalPosition === 'absolute') {
344 |                                 setAbsolute();
345 |                             } else {
346 |                                 setUnfixed();
347 |                             }
348 | 
349 |                             target.trigger('unfixed.ScrollToFixed');
350 |                         }
351 |                     } else {
352 |                         if (!isFixed()) {
353 |                             postPosition();
354 |                             target.trigger('preFixed.ScrollToFixed');
355 |                             setFixed();
356 |                         }
357 |                         setLeft(x);
358 |                         target.trigger('fixed.ScrollToFixed');
359 |                     }
360 |                 } else {
361 |                     setLeft(x);
362 |                 }
363 |             }
364 |         }
365 | 
366 |         function getBottom() {
367 |             if (!base.options.bottom) return 0;
368 |             return base.options.bottom;
369 |         }
370 | 
371 |         function postPosition() {
372 |             var position = target.css('position');
373 | 
374 |             if (position == 'absolute') {
375 |                 target.trigger('postAbsolute.ScrollToFixed');
376 |             } else if (position == 'fixed') {
377 |                 target.trigger('postFixed.ScrollToFixed');
378 |             } else {
379 |                 target.trigger('postUnfixed.ScrollToFixed');
380 |             }
381 |         }
382 | 
383 |         var windowResize = function(event) {
384 |             // Check if the element is visible before updating it's position, which
385 |             // improves behavior with responsive designs where this element is hidden.
386 |             if(target.is(':visible')) {
387 |                 isReset = false;
388 |                 checkScroll();
389 |             } else {
390 |               // Ensure the spacer is hidden
391 |               setUnfixed();
392 |             }
393 |         }
394 | 
395 |         var windowScroll = function(event) {
396 |             (!!window.requestAnimationFrame) ? requestAnimationFrame(checkScroll) : checkScroll();
397 |         }
398 | 
399 |         // From: http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED
400 |         var isPositionFixedSupported = function() {
401 |             var container = document.body;
402 | 
403 |             if (document.createElement && container && container.appendChild && container.removeChild) {
404 |                 var el = document.createElement('div');
405 | 
406 |                 if (!el.getBoundingClientRect) return null;
407 | 
408 |                 el.innerHTML = 'x';
409 |                 el.style.cssText = 'position:fixed;top:100px;';
410 |                 container.appendChild(el);
411 | 
412 |                 var originalHeight = container.style.height,
413 |                 originalScrollTop = container.scrollTop;
414 | 
415 |                 container.style.height = '3000px';
416 |                 container.scrollTop = 500;
417 | 
418 |                 var elementTop = el.getBoundingClientRect().top;
419 |                 container.style.height = originalHeight;
420 | 
421 |                 var isSupported = (elementTop === 100);
422 |                 container.removeChild(el);
423 |                 container.scrollTop = originalScrollTop;
424 | 
425 |                 return isSupported;
426 |             }
427 | 
428 |             return null;
429 |         }
430 | 
431 |         var preventDefault = function(e) {
432 |             e = e || window.event;
433 |             if (e.preventDefault) {
434 |                 e.preventDefault();
435 |             }
436 |             e.returnValue = false;
437 |         }
438 | 
439 |         // Initializes this plugin. Captures the options passed in, turns this
440 |         // off for devices that do not support fixed position, adds the spacer,
441 |         // and binds to the window scroll and resize events.
442 |         base.init = function() {
443 |             // Capture the options for this plugin.
444 |             base.options = $.extend({}, $.ScrollToFixed.defaultOptions, options);
445 | 
446 |             originalZIndex = target.css('z-index')
447 | 
448 |             // Turn off this functionality for devices that do not support it.
449 |             // if (!(base.options && base.options.dontCheckForPositionFixedSupport)) {
450 |             //     var fixedSupported = isPositionFixedSupported();
451 |             //     if (!fixedSupported) return;
452 |             // }
453 | 
454 |             // Put the target element on top of everything that could be below
455 |             // it. This reduces flicker when the target element is transitioning
456 |             // to fixed.
457 |             base.$el.css('z-index', base.options.zIndex);
458 | 
459 |             // Create a spacer element to fill the void left by the target
460 |             // element when it goes fixed.
461 |             spacer = $('<div />');
462 | 
463 |             position = target.css('position');
464 |             originalPosition = target.css('position');
465 |             originalFloat = target.css('float');
466 |             originalOffsetTop = target.css('top');
467 | 
468 |             // Place the spacer right after the target element.
469 |             if (isUnfixed()) base.$el.after(spacer);
470 | 
471 |             // Reset the target element offsets when the window is resized, then
472 |             // check to see if we need to fix or unfix the target element.
473 |             $(window).bind('resize.ScrollToFixed', windowResize);
474 | 
475 |             // When the window scrolls, check to see if we need to fix or unfix
476 |             // the target element.
477 |             $(window).bind('scroll.ScrollToFixed', windowScroll);
478 | 
479 |             // For touch devices, call checkScroll directlly rather than
480 |             // rAF wrapped windowScroll to animate the element
481 |             if ('ontouchmove' in window) {
482 |               $(window).bind('touchmove.ScrollToFixed', checkScroll);
483 |             }
484 | 
485 |             if (base.options.preFixed) {
486 |                 target.bind('preFixed.ScrollToFixed', base.options.preFixed);
487 |             }
488 |             if (base.options.postFixed) {
489 |                 target.bind('postFixed.ScrollToFixed', base.options.postFixed);
490 |             }
491 |             if (base.options.preUnfixed) {
492 |                 target.bind('preUnfixed.ScrollToFixed', base.options.preUnfixed);
493 |             }
494 |             if (base.options.postUnfixed) {
495 |                 target.bind('postUnfixed.ScrollToFixed', base.options.postUnfixed);
496 |             }
497 |             if (base.options.preAbsolute) {
498 |                 target.bind('preAbsolute.ScrollToFixed', base.options.preAbsolute);
499 |             }
500 |             if (base.options.postAbsolute) {
501 |                 target.bind('postAbsolute.ScrollToFixed', base.options.postAbsolute);
502 |             }
503 |             if (base.options.fixed) {
504 |                 target.bind('fixed.ScrollToFixed', base.options.fixed);
505 |             }
506 |             if (base.options.unfixed) {
507 |                 target.bind('unfixed.ScrollToFixed', base.options.unfixed);
508 |             }
509 | 
510 |             if (base.options.spacerClass) {
511 |                 spacer.addClass(base.options.spacerClass);
512 |             }
513 | 
514 |             target.bind('resize.ScrollToFixed', function() {
515 |                 spacer.height(target.height());
516 |             });
517 | 
518 |             target.bind('scroll.ScrollToFixed', function() {
519 |                 target.trigger('preUnfixed.ScrollToFixed');
520 |                 setUnfixed();
521 |                 target.trigger('unfixed.ScrollToFixed');
522 |                 checkScroll();
523 |             });
524 | 
525 |             target.bind('detach.ScrollToFixed', function(ev) {
526 |                 preventDefault(ev);
527 | 
528 |                 target.trigger('preUnfixed.ScrollToFixed');
529 |                 setUnfixed();
530 |                 target.trigger('unfixed.ScrollToFixed');
531 | 
532 |                 $(window).unbind('resize.ScrollToFixed', windowResize);
533 |                 $(window).unbind('scroll.ScrollToFixed', windowScroll);
534 | 
535 |                 target.unbind('.ScrollToFixed');
536 | 
537 |                 //remove spacer from dom
538 |                 spacer.remove();
539 | 
540 |                 base.$el.removeData('ScrollToFixed');
541 |             });
542 | 
543 |             // Reset everything.
544 |             windowResize();
545 |         };
546 | 
547 |         // Initialize the plugin.
548 |         base.init();
549 |     };
550 | 
551 |     // Sets the option defaults.
552 |     $.ScrollToFixed.defaultOptions = {
553 |         marginTop : 0,
554 |         limit : 0,
555 |         bottom : -1,
556 |         zIndex : 1000,
557 |         baseClassName: 'scroll-to-fixed-fixed'
558 |     };
559 | 
560 |     // Returns enhanced elements that will fix to the top of the page when the
561 |     // page is scrolled.
562 |     $.fn.scrollToFixed = function(options) {
563 |         return this.each(function() {
564 |             (new $.ScrollToFixed(this, options));
565 |         });
566 |     };
567 | })(jQuery);
568 | 


--------------------------------------------------------------------------------
/license.txt:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2011 Joseph Cava-Lynch
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 4 | this software and associated documentation files (the "Software"), to deal in
 5 | the Software without restriction, including without limitation the rights to
 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 7 | the Software, and to permit persons to whom the Software is furnished to do so,
 8 | subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
15 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
16 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
17 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
18 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "scrolltofixed",
 3 |   "version": "1.0.7",
 4 |   "description": "This plugin is used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.",
 5 |   "main": "jquery-scrolltofixed.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "git://github.com/bigspotteddog/ScrollToFixed.git"
 9 |   },
10 |   "author": "bigspotteddog",
11 |   "bugs": {
12 |     "url": "https://github.com/bigspotteddog/ScrollToFixed/issues"
13 |   },
14 |   "homepage": "https://github.com/bigspotteddog/ScrollToFixed",
15 |   "directories": {
16 |     "test": "tests"
17 |   },
18 |   "scripts": {
19 |     "test": "echo \"Error: no test specified\" && exit 1"
20 |   },
21 |   "keywords": [
22 |     "scroll",
23 |     "fixed",
24 |     "jquery"
25 |   ],
26 |   "license": "MIT"
27 | }
28 | 


--------------------------------------------------------------------------------
/test-min.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <head>
  3 | <style>
  4 | body {
  5 |     font-family: arial, sans-serif;
  6 |     margin: 0 auto 0;
  7 |     width: 960px;
  8 | }
  9 | body h1, h2 {
 10 |     font-weight: bold;
 11 |     font-size: 120%;
 12 |     margin-top: 12px;
 13 | }
 14 | body p {
 15 |     margin-top: 8px;
 16 | }
 17 | body ul {
 18 |     list-style: none;
 19 |     padding: 0px;
 20 |     margin: 0px;
 21 | }
 22 | .banner {
 23 |     background-color: #aaa;
 24 |     height: 80px;
 25 |     padding: 5px;
 26 |     width: 100%;
 27 | }
 28 | .header {
 29 |     background-color: #eee;
 30 |     height: 50px;
 31 |     padding: 5px;
 32 |     width: 100%;
 33 | }
 34 | .content {
 35 |     padding: 5px;
 36 | }
 37 | .content li {
 38 |     display: inline-block;
 39 |     vertical-align: top;
 40 | }
 41 | .footer {
 42 |     background-color: #eee;
 43 |     height: 50px;
 44 |     padding: 5px;
 45 |     width: 100%;
 46 | }
 47 | .footer-content {
 48 |     background-color: #aaa;
 49 |     padding: 5px;
 50 |     width: 100%;
 51 | }
 52 | #left {
 53 |     width: 770px;
 54 | }
 55 | #right {
 56 |     width: 150px;
 57 |     margin-left: 20px;
 58 | }
 59 | #summary {
 60 |     border: 1px solid #dddddd;
 61 |     position: absolute;
 62 |     top: 300px;
 63 |     width: 150px;
 64 | }
 65 | #summary .title {
 66 |     border-bottom: 1px solid #dddddd;
 67 |     width: 100%;
 68 |     background-color: #dddddd;
 69 |     font-size: 12pt;
 70 |     font-weight: bold;
 71 | }
 72 | #summary .contents {
 73 |     margin: 5px;
 74 |     font-size: 80%;
 75 | }
 76 | </style>
 77 | <title>Scroll to Fixed Plugin Demo</title>
 78 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
 79 | <script src="jquery-scrolltofixed-min.js" type="text/javascript"></script>
 80 | <script>
 81 |     $(document).ready(function() {
 82 |         $('.header').scrollToFixed();
 83 |         $('.header').bind('fixed.ScrollToFixed', function() { $(this).css('color', 'red'); });
 84 |         $('.header').bind('unfixed.ScrollToFixed', function() { $(this).css('color', ''); });
 85 | 
 86 |         $('.footer').scrollToFixed( {
 87 |             bottom: 0,
 88 |             limit: $('.footer').offset().top,
 89 |             preFixed: function() { $(this).css('color', 'blue'); },
 90 |             postFixed: function() { $(this).css('color', ''); },
 91 |         });
 92 | 
 93 |         // Order matters here because we are dependent on the state of the footer above for
 94 |         // our limit.  The footer must be set first; otherwise, we will not be in the right
 95 |         // position on a window refresh, if the limit is supposed to be invoked.
 96 |         $('#summary').scrollToFixed({
 97 |             marginTop: $('.header').outerHeight(true) + 10,
 98 |             limit: function() {
 99 |                 var limit = $('.footer').offset().top - $('#summary').outerHeight(true) - 10;
100 |                 return limit;
101 |             },
102 |             minWidth: 1000,
103 |             zIndex: 999,
104 |             fixed: function() {  },
105 |             dontCheckForPositionFixedSupport: true
106 |         });
107 | 
108 |         $('#summary').bind('unfixed.ScrollToFixed', function() {
109 |             if (window.console) console.log('summary preUnfixed');
110 |         });
111 |         $('#summary').bind('unfixed.ScrollToFixed', function() {
112 |             if (window.console) console.log('summary unfixed');
113 |             $(this).css('color', '');
114 |             $('.header').trigger('unfixed.ScrollToFixed');
115 |         });
116 |         $('#summary').bind('fixed.ScrollToFixed', function() {
117 |             if (window.console) console.log('summary fixed');
118 |             $(this).css('color', 'red');
119 |             $('.header').trigger('fixed.ScrollToFixed');
120 |         });
121 |     });
122 | </script>
123 | </head>
124 | <body>
125 |     <ul>
126 |         <li class="banner">
127 |             <h1>Banner</h1>
128 |         </li>
129 |         <li class="header">
130 |             <h1>Header</h1>
131 |         </li>
132 |         <li class="content">
133 |             <ul>
134 |                 <li id="left">
135 |                     <h1>Lorem ipsum dolor</h1><h2>Sit amet justo</h2><p>Leo sed sed pulvinar et magna id eget condimentum laborum vel suspendisse. Porttitor mattis aenean. Accumsan sed adipiscing. Amet penatibus rutrum vitae vehicula viverra amet nibh semper nunc libero tincidunt massa vitae sagittis urna consectetuer magna a diam parturient. Nec nec dolor. Venenatis purus quis. In turpis in. Officiis hic mauris lorem wisi maecenas.</p><h2>Velit sed eget donec placerat vestibulum</h2><p>Orci id gravida per neque nibh. Nullam sit commodo tincidunt et diam vitae pharetra sed. Tempus sit sodales. Voluptatem wisi mattis inceptos tellus dolor rhoncus sed et eu turpis torquent ligula eu dui lorem nec accumsan platea lacinia ac. Non faucibus per sit in vehicula magna lacus deleniti. Tincidunt per aliquam. Vestibulum adipiscing laoreet eget eros commodo. Laoreet molestie a eros in nec sed justo venenatis. Eu lorem gravida. Nisl non a sociis convallis leo. Est nunc nisl porta dignissim turpis. Sapien sed nulla. Amet mi diam. Sem risus accumsan. Posuere viverra convallis. Est at netus. Tortor eget quam. Wisi nulla erat vestibulum tempor eu hendrerit vel dolor. Aliquam magnis sed etiam felis eros.</p><h2>Scelerisque in justo neque ultricies vel eget libero quam vitae metus ante nonummy amet augue</h2><p>Velit tellus enim. Vitae et ultrices. Odio torquent ligula. Quam in a scelerisque malesuada non. Sem enim congue sed odio libero. Lacinia commodo feugiat sed nonummy lobortis erat maecenas vivamus. Lectus diam pede. Eget risus mauris. In dapibus libero suspendisse pellentesque urna. Id metus libero. Metus id accumsan curabitur id congue. Elementum diam placerat posuere vivamus felis. Arcu ante vestibulum. Orci ut ut magna nibh eu aliquam mi qui vel pretium nullam. Tellus ligula malesuada. Consequat id nulla. Feugiat suscipit ligula dolor amet congue urna etiam amet accumsan consequat distinctio natoque placerat nec. Eget lectus mauris molestie fusce dui. Vel consectetuer imperdiet tempus at sed. Proin aliquam nec. Ligula sit elit eget faucibus cras arcu in rhoncus. Lorem id integer. Vestibulum nec cum. Ligula aliquam tellus elit nisl lectus in diam tortor wisi mauris tempus.</p><p>Fermentum ipsum augue. Lectus in nunc vulputate tellus neque tortor erat cursus. Congue wisi enim. Nam eget dui auctor amet quis donec ipsum nibh. Nisl leo magna officia leo nibh.</p><h2>Mollis in ornare</h2><p>Nec a ut. Ut nullam urna. Quis tortor mauris blandit non corrupti. Rutrum in at id dignissim dictum. Duis ac ornare parturient ultrices amet odio feugiat aenean cras mus pede. Praesent egestas netus. Urna esse pharetra commodi commodo curabitur. A lacinia sed etiam ut vel maxime platea porta odio mollis non nisl nulla nullam. Vitae impedit pulvinar.</p><h2>Sem velit maiores</h2><p>Accumsan blandit ut. Varius velit ante. Leo tincidunt nulla lorem gravida nulla tempus volutpat donec phasellus aliquet nec. Sapien tempor id pharetra magna mi. Nunc fusce venenatis nam mi nam. Eget senectus convallis donec urna suscipit donec natoque lacinia rutrum lorem est adipiscing sed lectus. Dictumst faucibus ut. Vulputate sodales ipsum. Purus vehicula sed vestibulum eget integer.</p><h2>Ut turpis tempor integer fusce bibendum sem ipsum rutrum</h2><p>Nec in nibh. A amet condimentum. Commodo fringilla amet sit ut quis. Facilisi ac a ut id morbi. Aut pretium orci donec dui vel risus eros amet quis ut molestiae. Molestie nulla sem vestibulum urna aptent aliquam etiam auctor. Erat eu duis. Imperdiet vestibulum ut. Nibh risus fusce viverra wisi lectus.</p><h2>Sed curabitur ut vel condimentum fermentum a felis suspendisse</h2><p>Neque lacus lorem ut massa lacinia. Amet nulla est. Vitae in vel turpis diam elit lacinia amet quis. Sem a in. Architecto magna sit vel vehicula elit ullam consectetuer non. Vel vulputate elit facilisis accumsan justo. Ridiculus pharetra fusce. A volutpat curabitur. Senectus amet in elementum ipsum ut sit eros tellus.</p><h2>Phasellus enim metus vestibulum scelerisque mauris</h2><p>Donec nisl massa. Hendrerit suscipit turpis sed eget quis. Mauris wisi aenean amet semper morbi. Orci hendrerit vestibulum dolor a semper nullam nesciunt amet.</p><p>Erat ac non. Accumsan arcu mauris. Consectetuer vivamus convallis. Vestibulum neque vitae risus vivamus ut. Egestas elit eget. Venenatis mattis orci. Malesuada eget massa vitae est nec lacus et parturient nunc enim curabitur mollis vitae dictumst et malesuada non amet wisi amet sit lacus cras quis accumsan tortor tempore vulputate ante. Corrupti est sem dignissim ante vehicula ac cursus in tempus suspendisse at. Neque pariatur sed. Ac malesuada a. Hac duis pellentesque. Libero varius fugiat. Iaculis aliquam ac eros tempus sit sit in fusce. Luctus wisi amet. Vestibulum est vitae ut libero massa. Eu hendrerit velit. Et per massa congue vivamus sapien. Nibh nibh pulvinar. Libero velit est. Et lorem ipsum. Pretium sagittis nisl. Id ut viverra. Arcu dis sapien vehicula amet lacus sodales sagittis quam minim in mauris integer ante eu. Nisl id id eget sed molestie nec ac mauris nonummy proin porttitor. Vestibulum orci a sed in ligula.</p><h2>Lorem pede adipiscing massa eu eros</h2><p>Proin a at. Sagittis congue vitae. Eu arcu sem. A pede cras volutpat faucibus dui. Est ridiculus vestibulum blandit a dui montes dignissim mauris ac tellus diam. Rutrum gravida orci id eget morbi. Nec ut mollis. Dolore nulla donec. Nunc accumsan consectetuer. Erat orci vel. Primis erat nostra nec laoreet tempor eos porttitor sem hendrerit dignissim venenatis faucibus vel pellentesque. Lobortis in mi vitae donec metus faucibus amet viverra at ut dolor varius felis ante blandit sit litora ac autem ante. Pellentesque pede quisque. In nonummy pulvinar. Eget nunc quam. Massa torquent ut penatibus hendrerit et nulla scelerisque odio dolor vitae quis. In in quam dolor nec arcu. Magna vitae feugiat. Donec fermentum bibendum.</p><h2>Pretium dui dui</h2><p>Convallis wisi urna. Ipsum tellus ultricies. Non ac pretium. In non accumsan purus nec aliquip hendrerit fusce ornare ut turpis quis dictum tincidunt in vestibulum fringilla ad. In et dui. Eget tellus quisque arcu varius per tellus neque sit convallis nulla tellus. Nam faucibus aliquam. Vitae vel sed turpis nascetur ultricies aliquam vitae ultricies sed lobortis vestibulum sapien non eu. Sem amet nulla. Leo elit ipsum imperdiet sit dictumst. Enim turpis vivamus. Posuere odio ipsum in augue quisque nisl duis metus. Etiam imperdiet curabitur. Quis velit arcu. Ipsum turpis libero vel donec et. Ac risus a tempus.</p><h2>Sit amet dolore</h2><p>Praesent ipsum nibh ut curabitur justo. Ut proin faucibus. Ornare molestie magnis nec tempus ultricies eu amet sed. Et egestas aptent. Vel dignissim justo sodales suscipit lorem quis ullamcorper lacinia. Ac ligula nascetur. Tortor non leo at lacus non feugiat nisl aut suscipit nec ac rhoncus sed ipsum. Mauris condimentum erat rutrum ultricies justo.</p><h2>Rhoncus mauris vivamus</h2><p>Consectetuer quam euismod id accumsan a tellus ultrices quam suspendisse metus sit aliquam nec fermentum. Fusce aenean wisi. Purus eget rutrum non risus duis. Risus varius commodo egestas diam est. Dictum tellus nullam pede in ligula egestas neque pharetra vel justo non. Eu pharetra vestibulum. Mauris pede mauris. Erat a tellus. Orci vivamus mauris in morbi et.</p><h2>Scelerisque diamlorem sollicitudin</h2><p>Elementum libero etiam magna vitae velit scelerisque purus suspendisse. Amet torquent diam. In lacus vestibulum a ligula etiam. Vel convallis sapien. Cras platea rutrum. Leo pede volutpat. Ullamcorper dui sollicitudin consectetuer donec amet cras lorem nunc mattis sed dapibus metus enim ligula. Volutpat eu dictum mus vel ultrices. Sit nunc mattis. Mus donec tellus amet in a quaerat non vivamus sed in condimentum. Lacus posuere in. Condimentum sodales lacinia. Eget ante sagittis quisque duis scelerisque praesent tristique ut. Ipsum justo nulla viverra ornare in nam lectus aliquam.</p><p>Donec eget id est nulla nisl ipsa sollicitudin lectus vel fusce neque. Phasellus egestas commodo. Orci ipsum ut. Etiam vitae turpis vitae sed velit. Orci sollicitudin at. Felis id sem. Pharetra nisl dui nam enim non. Donec ullamcorper cras ligula dui mattis eget proin vitae. Nisl suspendisse tristique laoreet in etiam. Ac maecenas bibendum dis vel suspendisse. Et quisque integer. In lacus magna vel in aenean dolor facilisis nec. Mi ad tincidunt a nec felis duis nec nulla id sit vitae elementum egestas gravida. Wisi maecenas lectus. Nec ut nullam.</p><h2>Asperiores lectus minim</h2><p>Lorem integer faucibus lorem eget augue. Vulputate eget facilisis eu sollicitudin eget. Justo libero tincidunt tincidunt quam lacus. Leo ipsum felis. Eget potenti suscipit. Porta at omnis aliquam eleifend luctus. Est morbi tristique libero pellentesque nunc nec consectetuer in eget ante arcu eget sit integer. Metus magna sem vitae quam luctus id in sit neque suspendisse lacinia. Et arcu eget ac ante vivamus. Vitae magna cursus. Sollicitudin a vivamus. Pede eu nunc vehicula erat ipsum. Fusce quisque tincidunt. Fermentum sed aliquam elementum ut vitae wisi curabitur eget. Posuere nulla in curabitur sapien nascetur. Et proin maecenas integer hendrerit ultricies sed sed eu eget feugiat sem pellentesque velit eu. Suspendisse dui lectus. Ut tincidunt vitae. Et molestie donec.</p><h2>Auctor malesuada lorem</h2><p>In feugiat ut aliquam turpis vehicula. Dolor aut in gravida in nam eget euismod erat. Dignissim dictum non. Elit erat lorem ipsum lorem ac leo at turpis tristique amet aliquam morbi et per aliquam suspendisse cras. Sed elementum mi. Magna gravida facilisis ante dis mattis. Accumsan magnis elementum. Lacus dolor dictum. Sit vivamus integer. Nonummy ut torquent. Massa penatibus sit. Condimentum pulvinar ullamcorper. Vulputate laoreet primis lacus nec donec dictum eu pellentesque eros dictum amet risus dui.</p>
136 |                 </li>
137 |                 <li id="right">
138 |                     <ul id="summary">
139 |                         <li class="title">Summary</li>
140 |                         <li class="contents">
141 |                             <p>Leo sed sed pulvinar et magna id eget condimentum laborum vel suspendisse.</p><p>Porttitor mattis aenean. Accumsan sed adipiscing. Amet penatibus rutrum vitae vehicula viverra amet nibh semper nunc libero tincidunt massa vitae sagittis urna consectetuer magna a diam parturient.</p><p>Nec nec dolor. Venenatis purus quis. In turpis in. Officiis hic mauris lorem wisi maecenas.</p>
142 |                         </li>
143 |                     </ul>
144 |                 </li>
145 |             </ul>
146 |         </li>
147 |         <li class="footer">
148 |             <h1>Footer</h1>
149 |         </li>
150 |         <li class="footer-content">
151 |             <h2>Sit amet justo</h2><p>Leo sed sed pulvinar et magna id eget condimentum laborum vel suspendisse. Porttitor mattis aenean. Accumsan sed adipiscing. Amet penatibus rutrum vitae vehicula viverra amet nibh semper nunc libero tincidunt massa vitae sagittis urna consectetuer magna a diam parturient. Nec nec dolor. Venenatis purus quis. In turpis in. Officiis hic mauris lorem wisi maecenas.</p><h2>Velit sed eget donec placerat vestibulum</h2><p>Orci id gravida per neque nibh. Nullam sit commodo tincidunt et diam vitae pharetra sed. Tempus sit sodales. Voluptatem wisi mattis inceptos tellus dolor rhoncus sed et eu turpis torquent ligula eu dui lorem nec accumsan platea lacinia ac. Non faucibus per sit in vehicula magna lacus deleniti. Tincidunt per aliquam. Vestibulum adipiscing laoreet eget eros commodo. Laoreet molestie a eros in nec sed justo venenatis. Eu lorem gravida. Nisl non a sociis convallis leo. Est nunc nisl porta dignissim turpis. Sapien sed nulla. Amet mi diam. Sem risus accumsan. Posuere viverra convallis. Est at netus. Tortor eget quam. Wisi nulla erat vestibulum tempor eu hendrerit vel dolor. Aliquam magnis sed etiam felis eros.</p>
152 |         </li>
153 |     </ul>
154 | </body>
155 | </html>


--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | <style>
  5 | body {
  6 |     font-family: Arial, Helvetica, sans-serif;
  7 |     margin: 0px;
  8 |     min-width: 940px;
  9 | }
 10 | body p {
 11 |     margin-top: 8px;
 12 | }
 13 | body ul {
 14 |     list-style: none;
 15 |     padding: 0px;
 16 |     margin: 0px;
 17 | }
 18 | .main {
 19 |     margin: 0 auto;
 20 |     width: 900px;
 21 | }
 22 | .banner {
 23 |     background-color: #333333;
 24 |     color: #fefefe;
 25 |     padding: 20px;
 26 |     padding-top: 80px;
 27 |     padding-bottom: 80px;
 28 | }
 29 | .title {
 30 |     font-size: 140%;
 31 |     font-weight: bold;
 32 | }
 33 | .header {
 34 |     background-color: #eee;
 35 |     padding: 20px;
 36 | }
 37 | .header.scroll-to-fixed-fixed {
 38 |     color: red;
 39 | }
 40 | .content {
 41 |     padding: 20px;
 42 |     overflow: hidden;
 43 | }
 44 | .footer {
 45 |     background-color: #eee;
 46 |     padding: 20px;
 47 |     clear: both;
 48 | }
 49 | .footer.scroll-to-fixed-fixed {
 50 |     color: red;
 51 | }
 52 | .footer-content {
 53 |     background-color: #aaa;
 54 |     padding: 20px;
 55 | }
 56 | .demos li {
 57 |     margin-bottom: 20px;
 58 | }
 59 | .left {
 60 |     float: left;
 61 |     width: 680px;
 62 | }
 63 | .right {
 64 |     float: left;
 65 |     margin-left: 40px;
 66 | }
 67 | .summary {
 68 |     border: 1px solid #dddddd;
 69 |     overflow: hidden;
 70 |     margin-top: 20px;
 71 |     background-color: white;
 72 | }
 73 | .summary .caption {
 74 |     border-bottom: 1px solid #dddddd;
 75 |     background-color: #dddddd;
 76 |     font-size: 12pt;
 77 |     font-weight: bold;
 78 |     padding: 5px;
 79 | }
 80 | .summary.scroll-to-fixed-fixed {
 81 |     margin-top: 0px;
 82 | }
 83 | .summary.scroll-to-fixed-fixed .caption {
 84 |     color: red;
 85 | }
 86 | .contents {
 87 |     width: 150px;
 88 |     margin: 10px;
 89 |     font-size: 80%;
 90 | }
 91 | </style>
 92 | <title>ScrollToFixed Plugin Demo</title>
 93 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
 94 | <script src="jquery-scrolltofixed.js" type="text/javascript"></script>
 95 | <script>
 96 |     $(document).ready(function() {
 97 | 
 98 |         // Dock the header to the top of the window when scrolled past the banner.
 99 |         // This is the default behavior.
100 | 
101 |         $('.header').scrollToFixed();
102 | 
103 | 
104 |         // Dock the footer to the bottom of the page, but scroll up to reveal more
105 |         // content if the page is scrolled far enough.
106 | 
107 |         $('.footer').scrollToFixed( {
108 |             bottom: 0,
109 |             limit: $('.footer').offset().top
110 |         });
111 | 
112 | 
113 |         // Dock each summary as it arrives just below the docked header, pushing the
114 |         // previous summary up the page.
115 | 
116 |         var summaries = $('.summary');
117 |         summaries.each(function(i) {
118 |             var summary = $(summaries[i]);
119 |             var next = summaries[i + 1];
120 | 
121 |             summary.scrollToFixed({
122 |                 marginTop: $('.header').outerHeight(true) + 10,
123 |                 limit: function() {
124 |                     var limit = 0;
125 |                     if (next) {
126 |                         limit = $(next).offset().top - $(this).outerHeight(true) - 10;
127 |                     } else {
128 |                         limit = $('.footer').offset().top - $(this).outerHeight(true) - 10;
129 |                     }
130 |                     return limit;
131 |                 },
132 |                 zIndex: 999
133 |             });
134 |         });
135 |     });
136 | </script>
137 | </head>
138 | <body>
139 |     <ul>
140 |         <li class="banner">
141 |             <div class="main"><span class="title">Banner</span><span> - This banner will scroll out of view.</span></div>
142 |         </li>
143 |         <li class="header">
144 |             <div class="main"><span class="title">Header</span><span> - This header will dock to the top of the window.</span></div>
145 |         </li>
146 |         <li class="content main">
147 |             <ul>
148 |                 <li class="left">
149 |                     <h1>ScrollToFixed Demo</h1>
150 |                 </li>
151 |                 <li class="left">
152 |                     <h2>What?</h2>
153 | 
154 |                     <p>This jQuery plugin is used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.</p>
155 | 
156 |                     <p>Given an option marginTop, the element will stop moving vertically upward once the vertical scroll has reached the target position; but, the element will still move horizontally as the page is scrolled left or right. Once the page has been scrolled back down past the target position, the element will be restored to its original position on the page.</p>
157 | 
158 |                     <p>This plugin has been tested in Firefox 3+, Google Chrome 10+, Safari 5+, Internet Explorer 8/9, and Opera 11.60+.</p>
159 | 
160 |                     <p>This plugin was inspired by the excellent tutorial presented by Remy Sharp, titled &quot;Fixed Floating Elements&quot;.  You will find that tutorial <a href="http://jqueryfordesigners.com/fixed-floating-elements/">here</a>.</p>
161 | 
162 |                     <h2>How?</h2>
163 | 
164 |                     <p>You can get the plugin <a href="https://github.com/bigspotteddog/ScrollToFixed">here</a>.</p>
165 | 
166 |                     <p>The code below fixes the header to the top of the window and the footer to the bottom of the window.  The footer will reveal more content once the window is scrolled low enough.  Three summary elements on the right follow their respective sections, docking at the top of the window until the next section arrives.  Once the footer is undocked, it will push the last summary up the page to reveal its contents.</p>
167 | 
168 |                     <pre>
169 |     $(document).ready(function() {
170 | 
171 |         // Dock the header to the top of the window when scrolled past the banner.
172 |         // This is the default behavior.
173 | 
174 |         $('.header').scrollToFixed();
175 | 
176 | 
177 |         // Dock the footer to the bottom of the page, but scroll up to reveal more
178 |         // content if the page is scrolled far enough.
179 | 
180 |         $('.footer').scrollToFixed( {
181 |             bottom: 0,
182 |             limit: $('.footer').offset().top
183 |         });
184 | 
185 | 
186 |         // Dock each summary as it arrives just below the docked header, pushing the
187 |         // previous summary up the page.
188 | 
189 |         var summaries = $('.summary');
190 |         summaries.each(function(i) {
191 |             var summary = $(summaries[i]);
192 |             var next = summaries[i + 1];
193 | 
194 |             summary.scrollToFixed({
195 |                 marginTop: $('.header').outerHeight(true) + 10,
196 |                 limit: function() {
197 |                     var limit = 0;
198 |                     if (next) {
199 |                         limit = $(next).offset().top - $(this).outerHeight(true) - 10;
200 |                     } else {
201 |                         limit = $('.footer').offset().top - $(this).outerHeight(true) - 10;
202 |                     }
203 |                     return limit;
204 |                 },
205 |                 zIndex: 999
206 |             });
207 |         });
208 |     });
209 | </pre>             
210 |                     <p>The rest of this is all Greek to me :)</p>
211 | 
212 |                     <p>Orci id gravida per neque nibh. Nullam sit commodo tincidunt et diam vitae pharetra sed. Tempus sit sodales. Voluptatem wisi mattis inceptos tellus dolor rhoncus sed et eu turpis torquent ligula eu dui lorem nec accumsan platea lacinia ac. Non faucibus per sit in vehicula magna lacus deleniti. Tincidunt per aliquam. Vestibulum adipiscing laoreet eget eros commodo. Laoreet molestie a eros in nec sed justo venenatis. Eu lorem gravida. Nisl non a sociis convallis leo. Est nunc nisl porta dignissim turpis. Sapien sed nulla. Amet mi diam. Sem risus accumsan. Posuere viverra convallis. Est at netus. Tortor eget quam. Wisi nulla erat vestibulum tempor eu hendrerit vel dolor. Aliquam magnis sed etiam felis eros.</p>
213 | 
214 |                     <h2>Scelerisque in justo neque ultricies vel eget libero quam vitae metus ante nonummy amet augue</h2>
215 | 
216 |                     <p>Velit tellus enim. Vitae et ultrices. Odio torquent ligula. Quam in a scelerisque malesuada non. Sem enim congue sed odio libero. Lacinia commodo feugiat sed nonummy lobortis erat maecenas vivamus. Lectus diam pede. Eget risus mauris. In dapibus libero suspendisse pellentesque urna. Id metus libero. Metus id accumsan curabitur id congue. Elementum diam placerat posuere vivamus felis. Arcu ante vestibulum. Orci ut ut magna nibh eu aliquam mi qui vel pretium nullam. Tellus ligula malesuada. Consequat id nulla. Feugiat suscipit ligula dolor amet congue urna etiam amet accumsan consequat distinctio natoque placerat nec. Eget lectus mauris molestie fusce dui. Vel consectetuer imperdiet tempus at sed. Proin aliquam nec. Ligula sit elit eget faucibus cras arcu in rhoncus. Lorem id integer. Vestibulum nec cum. Ligula aliquam tellus elit nisl lectus in diam tortor wisi mauris tempus.</p><p>Fermentum ipsum augue. Lectus in nunc vulputate tellus neque tortor erat cursus. Congue wisi enim. Nam eget dui auctor amet quis donec ipsum nibh. Nisl leo magna officia leo nibh.</p>
217 | 
218 |                 </li>
219 |                 <li class="right">
220 |                     <ul id="summary1" class="summary">
221 |                         <li class="caption">Summary 1</li>
222 |                         <li class="contents">
223 |                             <p>There are three floating summaries on the right of this page.  They are anchored to their respective sections.</p>
224 | 
225 |                             <p>Once a summary reaches the bottom of the header above, it will stop there until the next section summary arrives.  Then, it will continue up the page.</p>
226 | 
227 |                             <p>The last summary will get pushed up the page by the footer once it undocks to reveal the content below it.</p>
228 |                         </li>
229 |                     </ul>
230 |                 </li>
231 |                 <li class="left">
232 |                     <h2>Mollis in ornare</h2>
233 | 
234 |                     <p>Nec a ut. Ut nullam urna. Quis tortor mauris blandit non corrupti. Rutrum in at id dignissim dictum. Duis ac ornare parturient ultrices amet odio feugiat aenean cras mus pede. Praesent egestas netus. Urna esse pharetra commodi commodo curabitur. A lacinia sed etiam ut vel maxime platea porta odio mollis non nisl nulla nullam. Vitae impedit pulvinar.</p>
235 | 
236 |                     <h2>Sem velit maiores</h2>
237 | 
238 |                     <p>Accumsan blandit ut. Varius velit ante. Leo tincidunt nulla lorem gravida nulla tempus volutpat donec phasellus aliquet nec. Sapien tempor id pharetra magna mi. Nunc fusce venenatis nam mi nam. Eget senectus convallis donec urna suscipit donec natoque lacinia rutrum lorem est adipiscing sed lectus. Dictumst faucibus ut. Vulputate sodales ipsum. Purus vehicula sed vestibulum eget integer.</p>
239 | 
240 |                     <h2>Ut turpis tempor integer fusce bibendum sem ipsum rutrum</h2>
241 | 
242 |                     <p>Nec in nibh. A amet condimentum. Commodo fringilla amet sit ut quis. Facilisi ac a ut id morbi. Aut pretium orci donec dui vel risus eros amet quis ut molestiae. Molestie nulla sem vestibulum urna aptent aliquam etiam auctor. Erat eu duis. Imperdiet vestibulum ut. Nibh risus fusce viverra wisi lectus.</p>
243 | 
244 |                     <h2>Sed curabitur ut vel condimentum fermentum a felis suspendisse</h2>
245 | 
246 |                     <p>Neque lacus lorem ut massa lacinia. Amet nulla est. Vitae in vel turpis diam elit lacinia amet quis. Sem a in. Architecto magna sit vel vehicula elit ullam consectetuer non. Vel vulputate elit facilisis accumsan justo. Ridiculus pharetra fusce. A volutpat curabitur. Senectus amet in elementum ipsum ut sit eros tellus.</p>
247 | 
248 |                     <h2>Phasellus enim metus vestibulum scelerisque mauris</h2>
249 | 
250 |                     <p>Donec nisl massa. Hendrerit suscipit turpis sed eget quis. Mauris wisi aenean amet semper morbi. Orci hendrerit vestibulum dolor a semper nullam nesciunt amet.</p><p>Erat ac non. Accumsan arcu mauris. Consectetuer vivamus convallis. Vestibulum neque vitae risus vivamus ut. Egestas elit eget. Venenatis mattis orci. Malesuada eget massa vitae est nec lacus et parturient nunc enim curabitur mollis vitae dictumst et malesuada non amet wisi amet sit lacus cras quis accumsan tortor tempore vulputate ante. Corrupti est sem dignissim ante vehicula ac cursus in tempus suspendisse at. Neque pariatur sed. Ac malesuada a. Hac duis pellentesque. Libero varius fugiat. Iaculis aliquam ac eros tempus sit sit in fusce. Luctus wisi amet. Vestibulum est vitae ut libero massa. Eu hendrerit velit. Et per massa congue vivamus sapien. Nibh nibh pulvinar. Libero velit est. Et lorem ipsum. Pretium sagittis nisl. Id ut viverra. Arcu dis sapien vehicula amet lacus sodales sagittis quam minim in mauris integer ante eu. Nisl id id eget sed molestie nec ac mauris nonummy proin porttitor. Vestibulum orci a sed in ligula.</p>
251 | 
252 |                     <h2>Lorem pede adipiscing massa eu eros</h2>
253 | 
254 |                     <p>Proin a at. Sagittis congue vitae. Eu arcu sem. A pede cras volutpat faucibus dui. Est ridiculus vestibulum blandit a dui montes dignissim mauris ac tellus diam. Rutrum gravida orci id eget morbi. Nec ut mollis. Dolore nulla donec. Nunc accumsan consectetuer. Erat orci vel. Primis erat nostra nec laoreet tempor eos porttitor sem hendrerit dignissim venenatis faucibus vel pellentesque. Lobortis in mi vitae donec metus faucibus amet viverra at ut dolor varius felis ante blandit sit litora ac autem ante. Pellentesque pede quisque. In nonummy pulvinar. Eget nunc quam. Massa torquent ut penatibus hendrerit et nulla scelerisque odio dolor vitae quis. In in quam dolor nec arcu. Magna vitae feugiat. Donec fermentum bibendum.</p>
255 | 
256 |                     <h2>Pretium dui dui</h2>
257 | 
258 |                     <p>Convallis wisi urna. Ipsum tellus ultricies. Non ac pretium. In non accumsan purus nec aliquip hendrerit fusce ornare ut turpis quis dictum tincidunt in vestibulum fringilla ad. In et dui. Eget tellus quisque arcu varius per tellus neque sit convallis nulla tellus. Nam faucibus aliquam. Vitae vel sed turpis nascetur ultricies aliquam vitae ultricies sed lobortis vestibulum sapien non eu. Sem amet nulla. Leo elit ipsum imperdiet sit dictumst. Enim turpis vivamus. Posuere odio ipsum in augue quisque nisl duis metus. Etiam imperdiet curabitur. Quis velit arcu. Ipsum turpis libero vel donec et. Ac risus a tempus.</p>
259 |                 </li>
260 |                 <li class="right">
261 |                     <ul id="summary2" class="summary">
262 |                         <li class="caption">Summary 2</li>
263 |                         <li class="contents">
264 |                             <p>This plugin has actually been in the wild for nearly two years.  I made it so I could learn jQuery and JavaScript.  Thankfully, others have contributed feedback, code, tests, and demos to help it mature.</p>
265 | 
266 |                             <p>Originally, it was used to dock the header row of a long table to the top of the window so we knew what each column was.  Every feature added from there was prompted by request.</p>
267 | 
268 |                             <p>I don't get a lot of time to work on this, so all of the help is much appreciated.</p>
269 |                         </li>
270 |                     </ul>
271 |                 </li>
272 |                 <li class="left">
273 |                     <h2>Sit amet dolore</h2>
274 | 
275 |                     <p>Praesent ipsum nibh ut curabitur justo. Ut proin faucibus. Ornare molestie magnis nec tempus ultricies eu amet sed. Et egestas aptent. Vel dignissim justo sodales suscipit lorem quis ullamcorper lacinia. Ac ligula nascetur. Tortor non leo at lacus non feugiat nisl aut suscipit nec ac rhoncus sed ipsum. Mauris condimentum erat rutrum ultricies justo.</p>
276 | 
277 |                     <h2>Rhoncus mauris vivamus</h2>
278 | 
279 |                     <p>Consectetuer quam euismod id accumsan a tellus ultrices quam suspendisse metus sit aliquam nec fermentum. Fusce aenean wisi. Purus eget rutrum non risus duis. Risus varius commodo egestas diam est. Dictum tellus nullam pede in ligula egestas neque pharetra vel justo non. Eu pharetra vestibulum. Mauris pede mauris. Erat a tellus. Orci vivamus mauris in morbi et.</p>
280 | 
281 |                     <h2>Scelerisque diamlorem sollicitudin</h2>
282 | 
283 |                     <p>Elementum libero etiam magna vitae velit scelerisque purus suspendisse. Amet torquent diam. In lacus vestibulum a ligula etiam. Vel convallis sapien. Cras platea rutrum. Leo pede volutpat. Ullamcorper dui sollicitudin consectetuer donec amet cras lorem nunc mattis sed dapibus metus enim ligula. Volutpat eu dictum mus vel ultrices. Sit nunc mattis. Mus donec tellus amet in a quaerat non vivamus sed in condimentum. Lacus posuere in. Condimentum sodales lacinia. Eget ante sagittis quisque duis scelerisque praesent tristique ut. Ipsum justo nulla viverra ornare in nam lectus aliquam.</p><p>Donec eget id est nulla nisl ipsa sollicitudin lectus vel fusce neque. Phasellus egestas commodo. Orci ipsum ut. Etiam vitae turpis vitae sed velit. Orci sollicitudin at. Felis id sem. Pharetra nisl dui nam enim non. Donec ullamcorper cras ligula dui mattis eget proin vitae. Nisl suspendisse tristique laoreet in etiam. Ac maecenas bibendum dis vel suspendisse. Et quisque integer. In lacus magna vel in aenean dolor facilisis nec. Mi ad tincidunt a nec felis duis nec nulla id sit vitae elementum egestas gravida. Wisi maecenas lectus. Nec ut nullam.</p>
284 | 
285 |                     <h2>Asperiores lectus minim</h2>
286 | 
287 |                     <p>Lorem integer faucibus lorem eget augue. Vulputate eget facilisis eu sollicitudin eget. Justo libero tincidunt tincidunt quam lacus. Leo ipsum felis. Eget potenti suscipit. Porta at omnis aliquam eleifend luctus. Est morbi tristique libero pellentesque nunc nec consectetuer in eget ante arcu eget sit integer. Metus magna sem vitae quam luctus id in sit neque suspendisse lacinia. Et arcu eget ac ante vivamus. Vitae magna cursus. Sollicitudin a vivamus. Pede eu nunc vehicula erat ipsum. Fusce quisque tincidunt. Fermentum sed aliquam elementum ut vitae wisi curabitur eget. Posuere nulla in curabitur sapien nascetur. Et proin maecenas integer hendrerit ultricies sed sed eu eget feugiat sem pellentesque velit eu. Suspendisse dui lectus. Ut tincidunt vitae. Et molestie donec.</p>
288 | 
289 |                     <h2>Auctor malesuada lorem</h2>
290 | 
291 |                     <p>In feugiat ut aliquam turpis vehicula. Dolor aut in gravida in nam eget euismod erat. Dignissim dictum non. Elit erat lorem ipsum lorem ac leo at turpis tristique amet aliquam morbi et per aliquam suspendisse cras. Sed elementum mi. Magna gravida facilisis ante dis mattis. Accumsan magnis elementum. Lacus dolor dictum. Sit vivamus integer. Nonummy ut torquent. Massa penatibus sit. Condimentum pulvinar ullamcorper. Vulputate laoreet primis lacus nec donec dictum eu pellentesque eros dictum amet risus dui.</p>
292 |                 </li>
293 |                 <li class="right">
294 |                     <ul id="summary3" class="summary">
295 |                         <li class="caption">Summary 3</li>
296 |                         <li class="contents">
297 |                             <p>Here are the fiddles created to demonstrate the plugin:</p>
298 |                             <ul class="demos">
299 |                                 <li><a href="http://jsfiddle.net/y3qV5/434/">Floating cart summary with a limit.</a></li>
300 |                                 <li><a href="http://jsfiddle.net/k2R3G/81/">Fixed header; allows content to flow under it.</a></li>
301 |                                 <li><a href="http://jsfiddle.net/ZczEt/167/">Very full example: fixed header, footer and floating summary, with events.</a></li>
302 |                                 <li><a href="http://jsfiddle.net/y3qV5/435/">Two cart summaries that scroll up and stop at different intervals.</a></li>
303 |                                 <li><a href="http://jsfiddle.net/y3qV5/769/">Another multi-cart example using floats, with section stops.</a></li>
304 |                                 <li><a href="http://jsfiddle.net/ZZYpG/2/">Endlessly scrolling date markers.</a></li>
305 |                             </ul>
306 |                         </li>
307 |                     </ul>
308 |                 </li>
309 |             </ul>
310 |         </li>
311 |         <li class="footer">
312 |             <div class="main"><span class="title">Footer</span><span> - This footer is docked to the bottom of the window, but will reveal more content when scrolled far enough.</span></div>
313 |         </li>
314 |         <li class="footer-content">
315 |             <div class="main">
316 | 
317 |                 <h2>Sit amet justo</h2>
318 | 
319 |                 <p>Leo sed sed pulvinar et magna id eget condimentum laborum vel suspendisse. Porttitor mattis aenean. Accumsan sed adipiscing. Amet penatibus rutrum vitae vehicula viverra amet nibh semper nunc libero tincidunt massa vitae sagittis urna consectetuer magna a diam parturient. Nec nec dolor. Venenatis purus quis. In turpis in. Officiis hic mauris lorem wisi maecenas.</p>
320 | 
321 |                 <h2>Velit sed eget donec placerat vestibulum</h2>
322 | 
323 |                 <p>Orci id gravida per neque nibh. Nullam sit commodo tincidunt et diam vitae pharetra sed. Tempus sit sodales. Voluptatem wisi mattis inceptos tellus dolor rhoncus sed et eu turpis torquent ligula eu dui lorem nec accumsan platea lacinia ac. Non faucibus per sit in vehicula magna lacus deleniti. Tincidunt per aliquam. Vestibulum adipiscing laoreet eget eros commodo. Laoreet molestie a eros in nec sed justo venenatis. Eu lorem gravida. Nisl non a sociis convallis leo. Est nunc nisl porta dignissim turpis. Sapien sed nulla. Amet mi diam. Sem risus accumsan. Posuere viverra convallis. Est at netus. Tortor eget quam. Wisi nulla erat vestibulum tempor eu hendrerit vel dolor. Aliquam magnis sed etiam felis eros.</p>
324 | 
325 |                 <h2>Sit amet mi</h2><p>Porttitor adipiscing erat. Mollis libero sit porttitor cursus posuere tortor suspendisse lectus vel vestibulum mi. Libero dapibus vitae. Lorem massa blandit in turpis consectetuer quisque rhoncus morbi nulla magna rutrum praesent per ridiculus pellentesque ipsum adipiscing. Tellus rutrum aliquam. Natoque augue ut sem quam metus. Phasellus sit nec imperdiet eleifend tincidunt. Morbi erat accumsan.</p><h2>Curabitur lorem fames nunc gravida et</h2><p>Ut tellus massa consequat vitae quisque. Neque eleifend vestibulum maecenas nunc felis. Vitae praesent lacus. Tristique augue id in turpis vestibulum erat placerat ornare. A consectetuer accumsan et donec vehicula sed nunc non. Velit in nec. Maecenas orci erat gravida sit dui. Fusce repellendus nec pellentesque ligula ligula. Sit ligula commodo nulla nulla dui.</p><h2>Con ut tincidunt</h2><p>Eleifend non sodales cursus metus ligula risus luctus eleifend. Nulla integer arcu suspendisse ligula sed. Aliquet fames morbi. Ut sed dictumst. Nec nulla risus diam faucibus nam donec orci fermentum hac ullamcorper a. Justo in a molestie praesent tellus. In eget non. Sagittis arcu vitae lacinia sed dolor. Mattis suspendisse amet sed elit aenean in vel pulvinar.</p><h2>Sem facilisis ultricies</h2><p>Justo luctus molestie. Ante feugiat nulla. Faucibus cras lectus condimentum proident morbi. Urna porta eros pellentesque elit sit sed tristique feugiat nullam eu inceptos a voluptatem vestibulum. Vitae faucibus eros eros dui curabitur praesent eu eu. Taciti et mi. Aliqua quo integer. Euismod donec vitae. Dapibus mauris donec ante diam metus dui sit eget nulla nisl etiam.</p><h2>Praesent metus facilis elit sed urna pede vel porttitor</h2><p>Enim orci consequat. Ac adipiscing consectetuer. Class porttitor ac. Nec pellentesque commodo at et mauris. Vestibulum quis risus vel nec metus. Suspendisse molestie vehicula donec fermentum eu massa suspendisse vel enim orci at. Sed lacus dignissim. Nunc vestibulum erat non eget mattis ut arcu vitae. Placerat leo metus mauris pharetra tempus.</p>
326 | 
327 |             </div>
328 |         </li>
329 |     </ul>
330 |     <a href="https://github.com/bigspotteddog/ScrollToFixed"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>    
331 | </body>
332 | </html>


--------------------------------------------------------------------------------
/tests/basic.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 |         "http://www.w3.org/TR/html4/strict.dtd">
 3 | <html lang="en">
 4 | <head>
 5 | 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6 |     <title>The most basic floatScroll test</title>
 7 | 	<style type="text/css" media="screen, print, projection">
 8 | 	body,
 9 | 	html {
10 | 		margin:0;
11 | 		padding:0;
12 | 		color:#000;
13 | 		background:#a7a09a;
14 |         height: 5000px;
15 | 	}
16 |     #test {
17 |         background: #f00;
18 |     }
19 | 	</style>
20 | </head>
21 | <body>
22 |     <h1>The most basic floatScroll test</h1>
23 |     <div id="test">
24 |         floatScroll this element.
25 |     </div>
26 |     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
27 |     <script type="text/javascript" src="../jquery-scrolltofixed.js"></script>
28 |     <script type="text/javascript">
29 |         $('#test').scrollToFixed();
30 |     </script>
31 | </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/tests/bounding_box.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 |         "http://www.w3.org/TR/html4/strict.dtd">
 3 | <html lang="en">
 4 | <head>
 5 | 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6 |     <title>The most basic floatScroll test</title>
 7 | 	<style type="text/css" media="screen, print, projection">
 8 | 	body,
 9 | 	html {
10 | 		margin:0;
11 | 		padding:0;
12 | 		color:#000;
13 | 		background:#a7a09a;
14 |         height: 5000px;
15 | 	}
16 |     #test {
17 |         background: #f00;
18 |     }
19 |     #wrapper {
20 |         border:10px solid green;
21 |         height: 800px;
22 |         padding-top:50px;
23 |     }
24 | 	</style>
25 | </head>
26 | <body>
27 |     <h1>The bounding box floatScroll test</h1>
28 |     <div id='wrapper'>
29 |         <div id="test">
30 |             floatScroll this element. It should stop once it reaches the end of the green box
31 |         </div>
32 |     </div>
33 |     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
34 |     <script type="text/javascript" src="../jquery-scrolltofixed.js"></script>
35 |     <script type="text/javascript">
36 |         $('#test').scrollToFixed({
37 |             limit: 922
38 |         });
39 |     </script>
40 | </body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/tests/box_sizing_border_box.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 |         "http://www.w3.org/TR/html4/strict.dtd">
 3 | <html lang="en">
 4 | <head>
 5 | 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6 | 	<title>Test Float For Position</title>
 7 | 	<style type="text/css" media="screen, print, projection">
 8 |         * {
 9 |                 -moz-box-sizing: border-box;
10 |                 -webkit-box-sizing: border-box;
11 |                 box-sizing: bounding-box;
12 |         }
13 | 	body,
14 | 	html {
15 | 		margin:0;
16 | 		padding:0;
17 | 		color:#000;
18 | 		background:#a7a09a;
19 | 	}
20 | 	#wrap {
21 | 		width:750px;
22 | 		margin:0 auto;
23 | 		background:#99c;
24 | 	}
25 | 	#header {
26 |     	padding:45px 10px;
27 | 		background:#ddd;
28 | 	}
29 | 	h1 {
30 | 	    margin:0;
31 |     }
32 | 	#main {
33 | 		float:left;
34 | 		width:480px;
35 | 		padding:10px;
36 | 		background:#9c9;
37 | 	}
38 | 	h2 {
39 | 		margin:0 0 1em;
40 | 	}
41 | 	#sidebar {
42 | 		float:right;
43 | 		width:270px;
44 | 		padding:10px;
45 | 		background:#99c;
46 | 	}
47 | 	</style>
48 | </head>
49 | <body>
50 | <div id="wrap">
51 | 	<div id="header"><h1>Sample box sizing border box</h1></div>
52 | 	<div id="main">
53 | 		<h2>Column 1</h2>
54 | 		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
55 | 		<p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.</p>
56 | 		<p>Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.</p>
57 | 		<h3>Consectetuer adipiscing elit</h3>
58 | 		<p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
59 | 		<p>Maecenas eu velit nec magna venenatis consequat. In neque. Vivamus pellentesque, lacus eu aliquet semper, lorem metus rhoncus metus, a ornare orci ante a diam. Nunc sem nisl, aliquet quis, elementum nec, imperdiet in, wisi. Proin in lorem. Etiam molestie diam eget ante. Morbi quis tortor id lacus mollis venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel orci sit amet tellus mollis eleifend. Donec urna diam, viverra eget, ultricies gravida, ultrices eu, erat. Proin vel arcu. Sed diam. Cras hendrerit arcu sed augue. Sed justo felis, luctus a, accumsan in, tincidunt facilisis, libero. Phasellus eu eros.</p>
60 |         <p>Donec luctus mauris a nulla tempor viverra. Sed molestie dui non nibh mattis vel blandit purus porttitor. Aliquam posuere, neque vel pharetra suscipit, nisi nibh condimentum justo, sit amet accumsan tortor felis eu odio. Morbi fringilla fermentum dui vel dictum. Mauris dapibus ipsum id lacus interdum pretium. Aliquam pellentesque dui vel justo eleifend ornare. Maecenas pulvinar, justo vel rhoncus cursus, nisl arcu euismod lorem, sit amet lacinia sem purus non turpis. Vivamus ultricies scelerisque urna et gravida. Praesent sed lectus nisl, et interdum enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
61 | 
62 |         <p>Ut pharetra iaculis nisi, sit amet lobortis nibh auctor eget. Phasellus feugiat enim et odio lobortis eget ullamcorper eros blandit. Aenean lectus nisi, ultrices nec placerat ut, ullamcorper tempor eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec elementum lectus eget neque vulputate ultricies. Ut ut pulvinar dolor. Sed congue arcu vel velit placerat mollis. Morbi sollicitudin tortor nunc, at pellentesque odio.</p>
63 | 
64 |         <p>Sed at nisi sed metus dignissim dignissim in eget tortor. Etiam accumsan auctor dolor eget tincidunt. Maecenas eleifend vulputate libero at dictum. Proin et diam quis nulla imperdiet convallis. Mauris dignissim eros ut lacus imperdiet consequat. Nulla pulvinar metus id velit tristique vitae facilisis lorem egestas. Praesent in nulla neque. Fusce nec tincidunt arcu. Cras tortor odio, interdum non tempor et, pretium et erat. Sed sit amet felis sit amet lectus semper rutrum et eget odio.</p>
65 | 
66 |         <p>Praesent vel dapibus augue. Vestibulum non orci eget dui ullamcorper placerat. Vivamus consectetur felis eu ipsum convallis vehicula. Donec non velit purus. Quisque eu nisl id ante pharetra egestas nec et enim. Aenean viverra commodo ante, sit amet convallis risus adipiscing quis. Suspendisse et nisl sed est cursus auctor nec sit amet diam. Praesent malesuada odio et erat auctor in fermentum orci dictum. Etiam nisi ante, lacinia a tempus nec, scelerisque consequat odio. Nunc tristique nulla at justo sollicitudin quis convallis enim pulvinar. Nam malesuada lorem lacinia leo interdum fermentum. Pellentesque porta mollis accumsan. Phasellus pulvinar laoreet ante, vitae elementum elit ornare sed. Proin non erat diam. Curabitur adipiscing purus sit amet felis luctus mattis. In hac habitasse platea dictumst.</p>
67 |         <p>Vivamus blandit ante sed arcu vehicula quis bibendum velit ultricies. Pellentesque imperdiet, sapien a luctus congue, urna justo vulputate turpis, at viverra eros ligula id dolor. Sed pulvinar sodales consequat. Quisque placerat lacus non purus gravida quis interdum urna lobortis. Quisque scelerisque ultricies est sit amet luctus. Duis leo arcu, tempus non vestibulum a, convallis ac tortor. Maecenas et metus nisl, eget fermentum ante. Suspendisse nec ipsum erat, ac luctus elit. Pellentesque tellus lorem, sollicitudin euismod imperdiet a, porta at enim. Nulla posuere luctus orci et bibendum. Praesent feugiat rutrum faucibus. In neque tellus, lobortis id lacinia sed, dictum accumsan velit. Fusce at commodo sapien. Donec imperdiet risus vitae nulla placerat nec posuere metus aliquet. Suspendisse et nulla ante.</p>
68 | 	</div>
69 | 	<div id="sidebar">
70 | 		<h2>dontSetWidth!!!</h2>
71 | 		<p>This test tests that when the element to be floated with border-box box-sizing it doesn't change width (when explicitly specified through 'dontSetWidth').</p>
72 | 		<ul>
73 | 			<li><a href="/">Link 1</a></li>
74 | 			<li><a href="/">Link 2</a></li>
75 | 			<li><a href="/">Link 3</a></li>
76 | 			<li><a href="/">Link 4</a></li>
77 | 			<li><a href="/">Link 5</a></li>
78 | 			<li><a href="/">Link 6</a></li>
79 | 			<li><a href="/">Link 7</a></li>
80 | 			<li><a href="/">Link 8</a></li>
81 | 			<li><a href="/">Link 9</a></li>
82 | 			<li><a href="/">Link 10</a></li>
83 | 		</ul>
84 | 	</div>
85 | </div>
86 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
87 | <script type="text/javascript" src="../jquery-scrolltofixed.js"></script>
88 | <script type="text/javascript">
89 |     $('#sidebar').scrollToFixed({dontSetWidth:true});
90 | </script>
91 | </body>
92 | </html>
93 | 


--------------------------------------------------------------------------------
/tests/fake_centering.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2 |         "http://www.w3.org/TR/html4/strict.dtd">
  3 | <html lang="en">
  4 | <head>
  5 | 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6 | 	<title>Test Float For Position</title>
  7 | 	<style type="text/css" media="screen, print, projection">
  8 | 	body,
  9 | 	html {
 10 | 		margin:0;
 11 | 		padding:0;
 12 | 		color:#000;
 13 | 		background:#a7a09a;
 14 | 	}
 15 | 	#wrap {
 16 | 		width:750px;
 17 | 		margin:0 auto;
 18 | 		background:#99c;
 19 | 	}
 20 | 	#header {
 21 |     	padding:45px 10px;
 22 | 		background:#ddd;
 23 | 	}
 24 | 	h1 {
 25 | 	    margin:0;
 26 |     }
 27 | 	#main {
 28 | 		float:left;
 29 | 		width:480px;
 30 | 		padding:10px;
 31 | 		background:#9c9;
 32 | 	}
 33 | 	h2 {
 34 | 		margin:0 0 1em;
 35 | 	}
 36 | 	#sidebar {
 37 | 		float:right;
 38 | 		width:230px;
 39 | 		padding:10px;
 40 | 		background:#99c;
 41 | 	}
 42 |     .full-width {
 43 |         position: relative;
 44 |         padding-left: 50%;
 45 |         padding-right: 50%;
 46 |         left: -50%;
 47 |         width: 100%;
 48 |     }
 49 |     #test {
 50 |         background: #f00;
 51 |     }
 52 | 	</style>
 53 | </head>
 54 | <body>
 55 | <div id="wrap">
 56 | 	<div id="header"><h1>Test for esoteric centering</h1></div>
 57 |     <div id="test" class="full-width">
 58 |         floatScroll this element
 59 |         <pre>
 60 |         position: relative;
 61 |         padding-left: 50%;
 62 |         padding-right: 50%;
 63 |         left: -50%;
 64 |         width: 100%;
 65 |         </pre>
 66 |     </div>
 67 | 	<div id="main">
 68 | 		<h2>Column 1</h2>
 69 | 		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 70 | 		<p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.</p>
 71 | 		<p>Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.</p>
 72 | 		<h3>Consectetuer adipiscing elit</h3>
 73 | 		<p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
 74 | 		<p>Maecenas eu velit nec magna venenatis consequat. In neque. Vivamus pellentesque, lacus eu aliquet semper, lorem metus rhoncus metus, a ornare orci ante a diam. Nunc sem nisl, aliquet quis, elementum nec, imperdiet in, wisi. Proin in lorem. Etiam molestie diam eget ante. Morbi quis tortor id lacus mollis venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel orci sit amet tellus mollis eleifend. Donec urna diam, viverra eget, ultricies gravida, ultrices eu, erat. Proin vel arcu. Sed diam. Cras hendrerit arcu sed augue. Sed justo felis, luctus a, accumsan in, tincidunt facilisis, libero. Phasellus eu eros.</p>
 75 |         <p>Donec luctus mauris a nulla tempor viverra. Sed molestie dui non nibh mattis vel blandit purus porttitor. Aliquam posuere, neque vel pharetra suscipit, nisi nibh condimentum justo, sit amet accumsan tortor felis eu odio. Morbi fringilla fermentum dui vel dictum. Mauris dapibus ipsum id lacus interdum pretium. Aliquam pellentesque dui vel justo eleifend ornare. Maecenas pulvinar, justo vel rhoncus cursus, nisl arcu euismod lorem, sit amet lacinia sem purus non turpis. Vivamus ultricies scelerisque urna et gravida. Praesent sed lectus nisl, et interdum enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 76 | 
 77 |         <p>Ut pharetra iaculis nisi, sit amet lobortis nibh auctor eget. Phasellus feugiat enim et odio lobortis eget ullamcorper eros blandit. Aenean lectus nisi, ultrices nec placerat ut, ullamcorper tempor eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec elementum lectus eget neque vulputate ultricies. Ut ut pulvinar dolor. Sed congue arcu vel velit placerat mollis. Morbi sollicitudin tortor nunc, at pellentesque odio.</p>
 78 | 
 79 |         <p>Sed at nisi sed metus dignissim dignissim in eget tortor. Etiam accumsan auctor dolor eget tincidunt. Maecenas eleifend vulputate libero at dictum. Proin et diam quis nulla imperdiet convallis. Mauris dignissim eros ut lacus imperdiet consequat. Nulla pulvinar metus id velit tristique vitae facilisis lorem egestas. Praesent in nulla neque. Fusce nec tincidunt arcu. Cras tortor odio, interdum non tempor et, pretium et erat. Sed sit amet felis sit amet lectus semper rutrum et eget odio.</p>
 80 | 
 81 |         <p>Praesent vel dapibus augue. Vestibulum non orci eget dui ullamcorper placerat. Vivamus consectetur felis eu ipsum convallis vehicula. Donec non velit purus. Quisque eu nisl id ante pharetra egestas nec et enim. Aenean viverra commodo ante, sit amet convallis risus adipiscing quis. Suspendisse et nisl sed est cursus auctor nec sit amet diam. Praesent malesuada odio et erat auctor in fermentum orci dictum. Etiam nisi ante, lacinia a tempus nec, scelerisque consequat odio. Nunc tristique nulla at justo sollicitudin quis convallis enim pulvinar. Nam malesuada lorem lacinia leo interdum fermentum. Pellentesque porta mollis accumsan. Phasellus pulvinar laoreet ante, vitae elementum elit ornare sed. Proin non erat diam. Curabitur adipiscing purus sit amet felis luctus mattis. In hac habitasse platea dictumst.</p>
 82 |         <p>Vivamus blandit ante sed arcu vehicula quis bibendum velit ultricies. Pellentesque imperdiet, sapien a luctus congue, urna justo vulputate turpis, at viverra eros ligula id dolor. Sed pulvinar sodales consequat. Quisque placerat lacus non purus gravida quis interdum urna lobortis. Quisque scelerisque ultricies est sit amet luctus. Duis leo arcu, tempus non vestibulum a, convallis ac tortor. Maecenas et metus nisl, eget fermentum ante. Suspendisse nec ipsum erat, ac luctus elit. Pellentesque tellus lorem, sollicitudin euismod imperdiet a, porta at enim. Nulla posuere luctus orci et bibendum. Praesent feugiat rutrum faucibus. In neque tellus, lobortis id lacinia sed, dictum accumsan velit. Fusce at commodo sapien. Donec imperdiet risus vitae nulla placerat nec posuere metus aliquet. Suspendisse et nulla ante.</p>
 83 | 	</div>
 84 | 	<div id="sidebar">
 85 | 		<ul>
 86 | 			<li><a href="/">Link 1</a></li>
 87 | 			<li><a href="/">Link 2</a></li>
 88 | 			<li><a href="/">Link 3</a></li>
 89 | 			<li><a href="/">Link 4</a></li>
 90 | 			<li><a href="/">Link 5</a></li>
 91 | 			<li><a href="/">Link 6</a></li>
 92 | 			<li><a href="/">Link 7</a></li>
 93 | 			<li><a href="/">Link 8</a></li>
 94 | 			<li><a href="/">Link 9</a></li>
 95 | 			<li><a href="/">Link 10</a></li>
 96 | 		</ul>
 97 | 	</div>
 98 | </div>
 99 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
100 | <script type="text/javascript" src="../jquery-scrolltofixed.js"></script>
101 | <script type="text/javascript">
102 |     $('#test').scrollToFixed();
103 | </script>
104 | </body>
105 | </html>
106 | 


--------------------------------------------------------------------------------
/tests/horizontal_scroll.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 |         "http://www.w3.org/TR/html4/strict.dtd">
 3 | <html lang="en">
 4 | <head>
 5 | 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6 |     <title>The most basic floatScroll test</title>
 7 | 	<style type="text/css" media="screen, print, projection">
 8 | 	body,
 9 | 	html {
10 | 		margin:0;
11 | 		padding:0;
12 | 		color:#000;
13 | 		background:#a7a09a;
14 |         height: 5000px;
15 | 	}
16 |     body {
17 |         min-width: 800px; 
18 |     }
19 |     #test {
20 |         background: #f00;
21 |         width: 5800px;
22 |         border: 3px dashed blue;
23 |         padding: 20px 30px;
24 |         font-size: 15px;
25 |     }
26 | 	</style>
27 | </head>
28 | <body>
29 |     <h1>Horizontal scroll floatScroll test</h1>
30 |     <div id="test">
31 |         floatScroll this element. After that, scroll the page to the left.
32 |     </div>
33 |     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
34 |     <script type="text/javascript" src="../jquery-scrolltofixed.js"></script>
35 |     <script type="text/javascript">
36 |         $('#test').scrollToFixed();
37 |     </script>
38 | </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/tests/position_absolute.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 |         "http://www.w3.org/TR/html4/strict.dtd">
 3 | <html lang="en">
 4 | <head>
 5 | 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6 | 	<title>Test Position Absolute</title>
 7 | 	<style type="text/css" media="screen, print, projection">
 8 | 	body,
 9 | 	html {
10 | 		margin:0;
11 | 		padding:0;
12 | 		color:#000;
13 | 		background:#a7a09a;
14 | 	}
15 | 	#wrap {
16 | 		width:750px;
17 | 		margin:0 auto;
18 | 		background:#99c;
19 | 	}
20 | 	#header {
21 |     	padding:45px 10px;
22 | 		background:#ddd;
23 | 	}
24 | 	h1 {
25 | 	    margin:0;
26 |     }
27 | 	#main {
28 | 		float:left;
29 | 		width:480px;
30 | 		padding:10px;
31 | 		background:#9c9;
32 | 	}
33 | 	h2 {
34 | 		margin:0 0 1em;
35 | 	}
36 | 	#sidebar {
37 |         position: absolute;
38 |         top: 130px;
39 |         right: 27%;
40 | 		width:230px;
41 | 		padding:10px;
42 | 		background:#99c;
43 | 	}
44 | 	</style>
45 | </head>
46 | <body>
47 | <div id="wrap">
48 | 	<div id="header"><h1>Sample floatScroll Demo</h1></div>
49 | 	<div id="main">
50 | 		<h2>Column 1</h2>
51 | 		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
52 | 		<p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.</p>
53 | 		<p>Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.</p>
54 | 		<h3>Consectetuer adipiscing elit</h3>
55 | 		<p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
56 | 		<p>Maecenas eu velit nec magna venenatis consequat. In neque. Vivamus pellentesque, lacus eu aliquet semper, lorem metus rhoncus metus, a ornare orci ante a diam. Nunc sem nisl, aliquet quis, elementum nec, imperdiet in, wisi. Proin in lorem. Etiam molestie diam eget ante. Morbi quis tortor id lacus mollis venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel orci sit amet tellus mollis eleifend. Donec urna diam, viverra eget, ultricies gravida, ultrices eu, erat. Proin vel arcu. Sed diam. Cras hendrerit arcu sed augue. Sed justo felis, luctus a, accumsan in, tincidunt facilisis, libero. Phasellus eu eros.</p>
57 |         <p>Donec luctus mauris a nulla tempor viverra. Sed molestie dui non nibh mattis vel blandit purus porttitor. Aliquam posuere, neque vel pharetra suscipit, nisi nibh condimentum justo, sit amet accumsan tortor felis eu odio. Morbi fringilla fermentum dui vel dictum. Mauris dapibus ipsum id lacus interdum pretium. Aliquam pellentesque dui vel justo eleifend ornare. Maecenas pulvinar, justo vel rhoncus cursus, nisl arcu euismod lorem, sit amet lacinia sem purus non turpis. Vivamus ultricies scelerisque urna et gravida. Praesent sed lectus nisl, et interdum enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
58 | 
59 |         <p>Ut pharetra iaculis nisi, sit amet lobortis nibh auctor eget. Phasellus feugiat enim et odio lobortis eget ullamcorper eros blandit. Aenean lectus nisi, ultrices nec placerat ut, ullamcorper tempor eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec elementum lectus eget neque vulputate ultricies. Ut ut pulvinar dolor. Sed congue arcu vel velit placerat mollis. Morbi sollicitudin tortor nunc, at pellentesque odio.</p>
60 | 
61 |         <p>Sed at nisi sed metus dignissim dignissim in eget tortor. Etiam accumsan auctor dolor eget tincidunt. Maecenas eleifend vulputate libero at dictum. Proin et diam quis nulla imperdiet convallis. Mauris dignissim eros ut lacus imperdiet consequat. Nulla pulvinar metus id velit tristique vitae facilisis lorem egestas. Praesent in nulla neque. Fusce nec tincidunt arcu. Cras tortor odio, interdum non tempor et, pretium et erat. Sed sit amet felis sit amet lectus semper rutrum et eget odio.</p>
62 | 
63 |         <p>Praesent vel dapibus augue. Vestibulum non orci eget dui ullamcorper placerat. Vivamus consectetur felis eu ipsum convallis vehicula. Donec non velit purus. Quisque eu nisl id ante pharetra egestas nec et enim. Aenean viverra commodo ante, sit amet convallis risus adipiscing quis. Suspendisse et nisl sed est cursus auctor nec sit amet diam. Praesent malesuada odio et erat auctor in fermentum orci dictum. Etiam nisi ante, lacinia a tempus nec, scelerisque consequat odio. Nunc tristique nulla at justo sollicitudin quis convallis enim pulvinar. Nam malesuada lorem lacinia leo interdum fermentum. Pellentesque porta mollis accumsan. Phasellus pulvinar laoreet ante, vitae elementum elit ornare sed. Proin non erat diam. Curabitur adipiscing purus sit amet felis luctus mattis. In hac habitasse platea dictumst.</p>
64 |         <p>Vivamus blandit ante sed arcu vehicula quis bibendum velit ultricies. Pellentesque imperdiet, sapien a luctus congue, urna justo vulputate turpis, at viverra eros ligula id dolor. Sed pulvinar sodales consequat. Quisque placerat lacus non purus gravida quis interdum urna lobortis. Quisque scelerisque ultricies est sit amet luctus. Duis leo arcu, tempus non vestibulum a, convallis ac tortor. Maecenas et metus nisl, eget fermentum ante. Suspendisse nec ipsum erat, ac luctus elit. Pellentesque tellus lorem, sollicitudin euismod imperdiet a, porta at enim. Nulla posuere luctus orci et bibendum. Praesent feugiat rutrum faucibus. In neque tellus, lobortis id lacinia sed, dictum accumsan velit. Fusce at commodo sapien. Donec imperdiet risus vitae nulla placerat nec posuere metus aliquet. Suspendisse et nulla ante.</p>
65 | 	</div>
66 | 	<div id="sidebar">
67 | 		<h2>floatScroll!!!</h2>
68 |         <p>This sidebar is positioned absolutely and should scroll correctly.
69 |         It is inside a wrap element that is NOT relatively positioned.</p>
70 | 		<ul>
71 | 			<li><a href="/">Link 1</a></li>
72 | 			<li><a href="/">Link 2</a></li>
73 | 			<li><a href="/">Link 3</a></li>
74 | 			<li><a href="/">Link 4</a></li>
75 | 			<li><a href="/">Link 5</a></li>
76 | 			<li><a href="/">Link 6</a></li>
77 | 			<li><a href="/">Link 7</a></li>
78 | 			<li><a href="/">Link 8</a></li>
79 | 			<li><a href="/">Link 9</a></li>
80 | 			<li><a href="/">Link 10</a></li>
81 | 		</ul>
82 | 	</div>
83 | </div>
84 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
85 | <script type="text/javascript" src="../jquery-scrolltofixed.js"></script>
86 | <script type="text/javascript">
87 |     $('#sidebar').scrollToFixed();
88 | </script>
89 | </body>
90 | </html>
91 | 


--------------------------------------------------------------------------------
/tests/position_absolute_in_relative.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 |         "http://www.w3.org/TR/html4/strict.dtd">
 3 | <html lang="en">
 4 | <head>
 5 | 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6 | 	<title>Test Absolute Position in Relative Element</title>
 7 | 	<style type="text/css" media="screen, print, projection">
 8 | 	body,
 9 | 	html {
10 | 		margin:0;
11 | 		padding:0;
12 | 		color:#000;
13 | 		background:#a7a09a;
14 | 	}
15 | 	#wrap {
16 | 		width:750px;
17 | 		margin:0 auto;
18 | 		background:#99c;
19 |         position: relative;
20 | 	}
21 | 	#header {
22 |     	padding:45px 10px;
23 | 		background:#ddd;
24 | 	}
25 | 	h1 {
26 | 	    margin:0;
27 |     }
28 | 	#main {
29 | 		float:left;
30 | 		width:480px;
31 | 		padding:10px;
32 | 		background:#9c9;
33 | 	}
34 | 	h2 {
35 | 		margin:0 0 1em;
36 | 	}
37 | 	#sidebar {
38 |         position: absolute;
39 |         top: 130px;
40 |         right: -200px;
41 | 		width:230px;
42 | 		padding:10px;
43 | 		background:#99c;
44 | 	}
45 | 	</style>
46 | </head>
47 | <body>
48 | <div id="wrap">
49 | 	<div id="header"><h1>Sample floatScroll Demo</h1></div>
50 | 	<div id="main">
51 | 		<h2>Column 1</h2>
52 | 		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
53 | 		<p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.</p>
54 | 		<p>Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.</p>
55 | 		<h3>Consectetuer adipiscing elit</h3>
56 | 		<p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
57 | 		<p>Maecenas eu velit nec magna venenatis consequat. In neque. Vivamus pellentesque, lacus eu aliquet semper, lorem metus rhoncus metus, a ornare orci ante a diam. Nunc sem nisl, aliquet quis, elementum nec, imperdiet in, wisi. Proin in lorem. Etiam molestie diam eget ante. Morbi quis tortor id lacus mollis venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel orci sit amet tellus mollis eleifend. Donec urna diam, viverra eget, ultricies gravida, ultrices eu, erat. Proin vel arcu. Sed diam. Cras hendrerit arcu sed augue. Sed justo felis, luctus a, accumsan in, tincidunt facilisis, libero. Phasellus eu eros.</p>
58 |         <p>Donec luctus mauris a nulla tempor viverra. Sed molestie dui non nibh mattis vel blandit purus porttitor. Aliquam posuere, neque vel pharetra suscipit, nisi nibh condimentum justo, sit amet accumsan tortor felis eu odio. Morbi fringilla fermentum dui vel dictum. Mauris dapibus ipsum id lacus interdum pretium. Aliquam pellentesque dui vel justo eleifend ornare. Maecenas pulvinar, justo vel rhoncus cursus, nisl arcu euismod lorem, sit amet lacinia sem purus non turpis. Vivamus ultricies scelerisque urna et gravida. Praesent sed lectus nisl, et interdum enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
59 | 
60 |         <p>Ut pharetra iaculis nisi, sit amet lobortis nibh auctor eget. Phasellus feugiat enim et odio lobortis eget ullamcorper eros blandit. Aenean lectus nisi, ultrices nec placerat ut, ullamcorper tempor eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec elementum lectus eget neque vulputate ultricies. Ut ut pulvinar dolor. Sed congue arcu vel velit placerat mollis. Morbi sollicitudin tortor nunc, at pellentesque odio.</p>
61 | 
62 |         <p>Sed at nisi sed metus dignissim dignissim in eget tortor. Etiam accumsan auctor dolor eget tincidunt. Maecenas eleifend vulputate libero at dictum. Proin et diam quis nulla imperdiet convallis. Mauris dignissim eros ut lacus imperdiet consequat. Nulla pulvinar metus id velit tristique vitae facilisis lorem egestas. Praesent in nulla neque. Fusce nec tincidunt arcu. Cras tortor odio, interdum non tempor et, pretium et erat. Sed sit amet felis sit amet lectus semper rutrum et eget odio.</p>
63 | 
64 |         <p>Praesent vel dapibus augue. Vestibulum non orci eget dui ullamcorper placerat. Vivamus consectetur felis eu ipsum convallis vehicula. Donec non velit purus. Quisque eu nisl id ante pharetra egestas nec et enim. Aenean viverra commodo ante, sit amet convallis risus adipiscing quis. Suspendisse et nisl sed est cursus auctor nec sit amet diam. Praesent malesuada odio et erat auctor in fermentum orci dictum. Etiam nisi ante, lacinia a tempus nec, scelerisque consequat odio. Nunc tristique nulla at justo sollicitudin quis convallis enim pulvinar. Nam malesuada lorem lacinia leo interdum fermentum. Pellentesque porta mollis accumsan. Phasellus pulvinar laoreet ante, vitae elementum elit ornare sed. Proin non erat diam. Curabitur adipiscing purus sit amet felis luctus mattis. In hac habitasse platea dictumst.</p>
65 |         <p>Vivamus blandit ante sed arcu vehicula quis bibendum velit ultricies. Pellentesque imperdiet, sapien a luctus congue, urna justo vulputate turpis, at viverra eros ligula id dolor. Sed pulvinar sodales consequat. Quisque placerat lacus non purus gravida quis interdum urna lobortis. Quisque scelerisque ultricies est sit amet luctus. Duis leo arcu, tempus non vestibulum a, convallis ac tortor. Maecenas et metus nisl, eget fermentum ante. Suspendisse nec ipsum erat, ac luctus elit. Pellentesque tellus lorem, sollicitudin euismod imperdiet a, porta at enim. Nulla posuere luctus orci et bibendum. Praesent feugiat rutrum faucibus. In neque tellus, lobortis id lacinia sed, dictum accumsan velit. Fusce at commodo sapien. Donec imperdiet risus vitae nulla placerat nec posuere metus aliquet. Suspendisse et nulla ante.</p>
66 | 	</div>
67 | 	<div id="sidebar">
68 | 		<h2>floatScroll!!!</h2>
69 |         <p>This sidebar is positioned absolutely and should scroll correctly.
70 |         It is inside a wrap element that is NOT relatively positioned.</p>
71 | 		<ul>
72 | 			<li><a href="/">Link 1</a></li>
73 | 			<li><a href="/">Link 2</a></li>
74 | 			<li><a href="/">Link 3</a></li>
75 | 			<li><a href="/">Link 4</a></li>
76 | 			<li><a href="/">Link 5</a></li>
77 | 			<li><a href="/">Link 6</a></li>
78 | 			<li><a href="/">Link 7</a></li>
79 | 			<li><a href="/">Link 8</a></li>
80 | 			<li><a href="/">Link 9</a></li>
81 | 			<li><a href="/">Link 10</a></li>
82 | 		</ul>
83 | 	</div>
84 | </div>
85 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
86 | <script type="text/javascript" src="../jquery-scrolltofixed.js"></script>
87 | <script type="text/javascript">
88 |     $('#sidebar').scrollToFixed();
89 | </script>
90 | </body>
91 | </html>
92 | 


--------------------------------------------------------------------------------
/tests/position_absolute_margin.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 |         "http://www.w3.org/TR/html4/strict.dtd">
 3 | <html lang="en">
 4 | <head>
 5 | 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6 | 	<title>Test Absolute Position with element margin</title>
 7 | 	<style type="text/css" media="screen, print, projection">
 8 | 	body,
 9 | 	html {
10 | 		margin:0;
11 | 		padding:0;
12 | 		color:#000;
13 | 		background:#a7a09a;
14 | 	}
15 | 	#wrap {
16 | 		width:750px;
17 | 		margin:0 auto;
18 | 		background:#99c;
19 |         position: relative;
20 | 	}
21 | 	#header {
22 |     	padding:45px 10px;
23 | 		background:#ddd;
24 | 	}
25 | 	h1 {
26 | 	    margin:0;
27 |     }
28 | 	#main {
29 | 		float:left;
30 | 		width:480px;
31 | 		padding:10px;
32 | 		background:#9c9;
33 | 	}
34 | 	h2 {
35 | 		margin:0 0 1em;
36 | 	}
37 | 	#sidebar {
38 |         margin-left: 200px;
39 |         position: absolute;
40 |         top: 130px;
41 |         right: -200px;
42 | 		width:230px;
43 | 		padding:10px;
44 | 		background:#99c;
45 | 	}
46 | 	</style>
47 | </head>
48 | <body>
49 | <div id="wrap">
50 | 	<div id="header"><h1>Sample floatScroll Demo</h1></div>
51 | 	<div id="main">
52 | 		<h2>Column 1</h2>
53 | 		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
54 | 		<p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.</p>
55 | 		<p>Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.</p>
56 | 		<h3>Consectetuer adipiscing elit</h3>
57 | 		<p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
58 | 		<p>Maecenas eu velit nec magna venenatis consequat. In neque. Vivamus pellentesque, lacus eu aliquet semper, lorem metus rhoncus metus, a ornare orci ante a diam. Nunc sem nisl, aliquet quis, elementum nec, imperdiet in, wisi. Proin in lorem. Etiam molestie diam eget ante. Morbi quis tortor id lacus mollis venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel orci sit amet tellus mollis eleifend. Donec urna diam, viverra eget, ultricies gravida, ultrices eu, erat. Proin vel arcu. Sed diam. Cras hendrerit arcu sed augue. Sed justo felis, luctus a, accumsan in, tincidunt facilisis, libero. Phasellus eu eros.</p>
59 |         <p>Donec luctus mauris a nulla tempor viverra. Sed molestie dui non nibh mattis vel blandit purus porttitor. Aliquam posuere, neque vel pharetra suscipit, nisi nibh condimentum justo, sit amet accumsan tortor felis eu odio. Morbi fringilla fermentum dui vel dictum. Mauris dapibus ipsum id lacus interdum pretium. Aliquam pellentesque dui vel justo eleifend ornare. Maecenas pulvinar, justo vel rhoncus cursus, nisl arcu euismod lorem, sit amet lacinia sem purus non turpis. Vivamus ultricies scelerisque urna et gravida. Praesent sed lectus nisl, et interdum enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
60 | 
61 |         <p>Ut pharetra iaculis nisi, sit amet lobortis nibh auctor eget. Phasellus feugiat enim et odio lobortis eget ullamcorper eros blandit. Aenean lectus nisi, ultrices nec placerat ut, ullamcorper tempor eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec elementum lectus eget neque vulputate ultricies. Ut ut pulvinar dolor. Sed congue arcu vel velit placerat mollis. Morbi sollicitudin tortor nunc, at pellentesque odio.</p>
62 | 
63 |         <p>Sed at nisi sed metus dignissim dignissim in eget tortor. Etiam accumsan auctor dolor eget tincidunt. Maecenas eleifend vulputate libero at dictum. Proin et diam quis nulla imperdiet convallis. Mauris dignissim eros ut lacus imperdiet consequat. Nulla pulvinar metus id velit tristique vitae facilisis lorem egestas. Praesent in nulla neque. Fusce nec tincidunt arcu. Cras tortor odio, interdum non tempor et, pretium et erat. Sed sit amet felis sit amet lectus semper rutrum et eget odio.</p>
64 | 
65 |         <p>Praesent vel dapibus augue. Vestibulum non orci eget dui ullamcorper placerat. Vivamus consectetur felis eu ipsum convallis vehicula. Donec non velit purus. Quisque eu nisl id ante pharetra egestas nec et enim. Aenean viverra commodo ante, sit amet convallis risus adipiscing quis. Suspendisse et nisl sed est cursus auctor nec sit amet diam. Praesent malesuada odio et erat auctor in fermentum orci dictum. Etiam nisi ante, lacinia a tempus nec, scelerisque consequat odio. Nunc tristique nulla at justo sollicitudin quis convallis enim pulvinar. Nam malesuada lorem lacinia leo interdum fermentum. Pellentesque porta mollis accumsan. Phasellus pulvinar laoreet ante, vitae elementum elit ornare sed. Proin non erat diam. Curabitur adipiscing purus sit amet felis luctus mattis. In hac habitasse platea dictumst.</p>
66 |         <p>Vivamus blandit ante sed arcu vehicula quis bibendum velit ultricies. Pellentesque imperdiet, sapien a luctus congue, urna justo vulputate turpis, at viverra eros ligula id dolor. Sed pulvinar sodales consequat. Quisque placerat lacus non purus gravida quis interdum urna lobortis. Quisque scelerisque ultricies est sit amet luctus. Duis leo arcu, tempus non vestibulum a, convallis ac tortor. Maecenas et metus nisl, eget fermentum ante. Suspendisse nec ipsum erat, ac luctus elit. Pellentesque tellus lorem, sollicitudin euismod imperdiet a, porta at enim. Nulla posuere luctus orci et bibendum. Praesent feugiat rutrum faucibus. In neque tellus, lobortis id lacinia sed, dictum accumsan velit. Fusce at commodo sapien. Donec imperdiet risus vitae nulla placerat nec posuere metus aliquet. Suspendisse et nulla ante.</p>
67 | 	</div>
68 | 	<div id="sidebar">
69 | 		<h2>floatScroll!!!</h2>
70 |         <p>This sidebar is <strong>positioned absolutely</strong> and should
71 |         scroll correctly.  It is inside a wrap element that is NOT relatively
72 |         positioned. It also has a <strong>left margin</strong>.</p>
73 |         <p>Pay no attention to the weird place this is initially placed on the
74 |         page.</p>
75 | 		<ul>
76 | 			<li><a href="/">Link 1</a></li>
77 | 			<li><a href="/">Link 2</a></li>
78 | 			<li><a href="/">Link 3</a></li>
79 | 			<li><a href="/">Link 4</a></li>
80 | 			<li><a href="/">Link 5</a></li>
81 | 			<li><a href="/">Link 6</a></li>
82 | 			<li><a href="/">Link 7</a></li>
83 | 			<li><a href="/">Link 8</a></li>
84 | 			<li><a href="/">Link 9</a></li>
85 | 			<li><a href="/">Link 10</a></li>
86 | 		</ul>
87 | 	</div>
88 | </div>
89 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
90 | <script type="text/javascript" src="../jquery-scrolltofixed.js"></script>
91 | <script type="text/javascript">
92 |     $('#sidebar').scrollToFixed();
93 | </script>
94 | </body>
95 | </html>
96 | 


--------------------------------------------------------------------------------
/tests/position_top_arg.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 |         "http://www.w3.org/TR/html4/strict.dtd">
 3 | <html lang="en">
 4 | <head>
 5 | 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6 |     <title>The most basic floatScroll test</title>
 7 | 	<style type="text/css" media="screen, print, projection">
 8 | 	body,
 9 | 	html {
10 | 		margin:0;
11 | 		padding:0;
12 | 		color:#000;
13 | 		background:#a7a09a;
14 |         height: 5000px;
15 | 	}
16 |     #filler {
17 |         height: 50px;
18 |         background: #0f0;
19 |     }
20 |     #test {
21 |         background: #f00;
22 |     }
23 | 	</style>
24 | </head>
25 | <body>
26 |     <h1>Tests that the positionTop argument passed to floatScroll() works.</h1>
27 |     <div id="filler">
28 |         When the browser reaches the top of this element, the test element should float.
29 |     </div>
30 |     <div id="test">
31 |         floatScroll this element.
32 |     </div>
33 |     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
34 |     <script type="text/javascript" src="../jquery-scrolltofixed.js"></script>
35 |     <script type="text/javascript">
36 |         $('#test').scrollToFixed({marginTop: 50});
37 |     </script>
38 | </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/tests/position_with_floats.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 |         "http://www.w3.org/TR/html4/strict.dtd">
 3 | <html lang="en">
 4 | <head>
 5 | 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 6 | 	<title>Test Float For Position</title>
 7 | 	<style type="text/css" media="screen, print, projection">
 8 | 	body,
 9 | 	html {
10 | 		margin:0;
11 | 		padding:0;
12 | 		color:#000;
13 | 		background:#a7a09a;
14 | 	}
15 | 	#wrap {
16 | 		width:750px;
17 | 		margin:0 auto;
18 | 		background:#99c;
19 | 	}
20 | 	#header {
21 |     	padding:45px 10px;
22 | 		background:#ddd;
23 | 	}
24 | 	h1 {
25 | 	    margin:0;
26 |     }
27 | 	#main {
28 | 		float:left;
29 | 		width:480px;
30 | 		padding:10px;
31 | 		background:#9c9;
32 | 	}
33 | 	h2 {
34 | 		margin:0 0 1em;
35 | 	}
36 | 	#sidebar {
37 | 		float:right;
38 | 		width:230px;
39 | 		padding:10px;
40 | 		background:#99c;
41 | 	}
42 | 	</style>
43 | </head>
44 | <body>
45 | <div id="wrap">
46 | 	<div id="header"><h1>Sample floatScroll Demo</h1></div>
47 | 	<div id="main">
48 | 		<h2>Column 1</h2>
49 | 		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
50 | 		<p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.</p>
51 | 		<p>Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus nonummy interdum est. Pellentesque quam.</p>
52 | 		<h3>Consectetuer adipiscing elit</h3>
53 | 		<p>Nulla dictum. Praesent turpis libero, pretium in, pretium ac, malesuada sed, ligula. Sed a urna eu ipsum luctus faucibus. Curabitur fringilla. Suspendisse sit amet quam. Sed vel pede id libero luctus fermentum. Vestibulum volutpat tempor lectus. Vivamus convallis tempus ante. Nullam adipiscing dui blandit ipsum. Nullam convallis lacus ut quam. Mauris semper elit at ante. Vivamus tristique. Pellentesque pharetra ante at pede. In ultrices arcu vitae purus. In rutrum, erat at mollis consequat, leo massa consequat libero, ac vestibulum libero tellus sed risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
54 | 		<p>Maecenas eu velit nec magna venenatis consequat. In neque. Vivamus pellentesque, lacus eu aliquet semper, lorem metus rhoncus metus, a ornare orci ante a diam. Nunc sem nisl, aliquet quis, elementum nec, imperdiet in, wisi. Proin in lorem. Etiam molestie diam eget ante. Morbi quis tortor id lacus mollis venenatis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam vel orci sit amet tellus mollis eleifend. Donec urna diam, viverra eget, ultricies gravida, ultrices eu, erat. Proin vel arcu. Sed diam. Cras hendrerit arcu sed augue. Sed justo felis, luctus a, accumsan in, tincidunt facilisis, libero. Phasellus eu eros.</p>
55 |         <p>Donec luctus mauris a nulla tempor viverra. Sed molestie dui non nibh mattis vel blandit purus porttitor. Aliquam posuere, neque vel pharetra suscipit, nisi nibh condimentum justo, sit amet accumsan tortor felis eu odio. Morbi fringilla fermentum dui vel dictum. Mauris dapibus ipsum id lacus interdum pretium. Aliquam pellentesque dui vel justo eleifend ornare. Maecenas pulvinar, justo vel rhoncus cursus, nisl arcu euismod lorem, sit amet lacinia sem purus non turpis. Vivamus ultricies scelerisque urna et gravida. Praesent sed lectus nisl, et interdum enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
56 | 
57 |         <p>Ut pharetra iaculis nisi, sit amet lobortis nibh auctor eget. Phasellus feugiat enim et odio lobortis eget ullamcorper eros blandit. Aenean lectus nisi, ultrices nec placerat ut, ullamcorper tempor eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec elementum lectus eget neque vulputate ultricies. Ut ut pulvinar dolor. Sed congue arcu vel velit placerat mollis. Morbi sollicitudin tortor nunc, at pellentesque odio.</p>
58 | 
59 |         <p>Sed at nisi sed metus dignissim dignissim in eget tortor. Etiam accumsan auctor dolor eget tincidunt. Maecenas eleifend vulputate libero at dictum. Proin et diam quis nulla imperdiet convallis. Mauris dignissim eros ut lacus imperdiet consequat. Nulla pulvinar metus id velit tristique vitae facilisis lorem egestas. Praesent in nulla neque. Fusce nec tincidunt arcu. Cras tortor odio, interdum non tempor et, pretium et erat. Sed sit amet felis sit amet lectus semper rutrum et eget odio.</p>
60 | 
61 |         <p>Praesent vel dapibus augue. Vestibulum non orci eget dui ullamcorper placerat. Vivamus consectetur felis eu ipsum convallis vehicula. Donec non velit purus. Quisque eu nisl id ante pharetra egestas nec et enim. Aenean viverra commodo ante, sit amet convallis risus adipiscing quis. Suspendisse et nisl sed est cursus auctor nec sit amet diam. Praesent malesuada odio et erat auctor in fermentum orci dictum. Etiam nisi ante, lacinia a tempus nec, scelerisque consequat odio. Nunc tristique nulla at justo sollicitudin quis convallis enim pulvinar. Nam malesuada lorem lacinia leo interdum fermentum. Pellentesque porta mollis accumsan. Phasellus pulvinar laoreet ante, vitae elementum elit ornare sed. Proin non erat diam. Curabitur adipiscing purus sit amet felis luctus mattis. In hac habitasse platea dictumst.</p>
62 |         <p>Vivamus blandit ante sed arcu vehicula quis bibendum velit ultricies. Pellentesque imperdiet, sapien a luctus congue, urna justo vulputate turpis, at viverra eros ligula id dolor. Sed pulvinar sodales consequat. Quisque placerat lacus non purus gravida quis interdum urna lobortis. Quisque scelerisque ultricies est sit amet luctus. Duis leo arcu, tempus non vestibulum a, convallis ac tortor. Maecenas et metus nisl, eget fermentum ante. Suspendisse nec ipsum erat, ac luctus elit. Pellentesque tellus lorem, sollicitudin euismod imperdiet a, porta at enim. Nulla posuere luctus orci et bibendum. Praesent feugiat rutrum faucibus. In neque tellus, lobortis id lacinia sed, dictum accumsan velit. Fusce at commodo sapien. Donec imperdiet risus vitae nulla placerat nec posuere metus aliquet. Suspendisse et nulla ante.</p>
63 | 	</div>
64 | 	<div id="sidebar">
65 | 		<h2>floatScroll!!!</h2>
66 | 		<p>This test tests that when the element to be floatScroll'd is floated, it acts as expected when floatScroll'd.</p>
67 | 		<ul>
68 | 			<li><a href="/">Link 1</a></li>
69 | 			<li><a href="/">Link 2</a></li>
70 | 			<li><a href="/">Link 3</a></li>
71 | 			<li><a href="/">Link 4</a></li>
72 | 			<li><a href="/">Link 5</a></li>
73 | 			<li><a href="/">Link 6</a></li>
74 | 			<li><a href="/">Link 7</a></li>
75 | 			<li><a href="/">Link 8</a></li>
76 | 			<li><a href="/">Link 9</a></li>
77 | 			<li><a href="/">Link 10</a></li>
78 | 		</ul>
79 | 	</div>
80 | </div>
81 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
82 | <script type="text/javascript" src="../jquery-scrolltofixed.js"></script>
83 | <script type="text/javascript">
84 |     $('#sidebar').scrollToFixed();
85 | </script>
86 | </body>
87 | </html>
88 | 


--------------------------------------------------------------------------------