jQuery 2.* Syntax and Outer Width Fix

jquery-scrolltofixed.js

@@ -1,7 +1,7 @@
 /*
  * ScrollToFixed
  * https://github.com/bigspotteddog/ScrollToFixed
- * 
+ *
  * Copyright (c) 2011 Joseph Cava-Lynch
  * MIT license
  */
@@ -53,10 +53,6 @@
         // when it goes fixed; otherwise, everything below it moves up the page.
         var spacer = null;
 
-        var spacerClass;
-
-        var className;
-
         // Capture the original offsets for the target element. This needs to be
         // called whenever the page size changes or when the page is first
         // scrolled. For some reason, calling this before the page is first
@@ -140,19 +136,21 @@
                 // not fill the rest of the page horizontally. Also, set its top
                 // to the margin top specified in the options.
 
-                cssOptions={
+                var cssOptions = {
                     'z-index' : base.options.zIndex,
                     'position' : 'fixed',
-                    'top' : base.options.bottom == -1?getMarginTop():'',
-                    'bottom' : base.options.bottom == -1?'':base.options.bottom,
+                    'top' : base.options.bottom === -1 ? getMarginTop() : '',
+                    'bottom' : base.options.bottom === -1 ? '' : base.options.bottom,
                     'margin-left' : '0px'
+                };
+                if (!base.options.dontSetWidth){
+                  cssOptions.width = target.outerWidth(true) + 'px';
                 }
-                if (!base.options.dontSetWidth){ cssOptions['width']=target.width(); };
 
                 target.css(cssOptions);
-                
+
                 target.addClass(base.options.baseClassName);
-                
+
                 if (base.options.className) {
                     target.addClass(base.options.className);
                 }
@@ -171,14 +169,16 @@
                 top = top - offsetTop;
             }
 
-            cssOptions={
+            var cssOptions = {
               'position' : 'absolute',
               'top' : top,
               'left' : left,
               'margin-left' : '0px',
               'bottom' : ''
+            };
+            if (!base.options.dontSetWidth){
+              cssOptions.width = target.outerWidth(true) + 'px';
             }
-            if (!base.options.dontSetWidth){ cssOptions['width']=target.width(); };
 
             target.css(cssOptions);
 
@@ -381,11 +381,16 @@
                 isReset = false;
                 checkScroll();
             }
-        }
+        };
 
         var windowScroll = function(event) {
-            (!!window.requestAnimationFrame) ? requestAnimationFrame(checkScroll) : checkScroll();
-        }
+            if (!!window.requestAnimationFrame) {
+              window.requestAnimationFrame(checkScroll);
+            }
+            else {
+              checkScroll();
+            }
+        };
 
         // From: http://kangax.github.com/cft/#IS_POSITION_FIXED_SUPPORTED
         var isPositionFixedSupported = function() {
@@ -417,15 +422,15 @@
             }
 
             return null;
-        }
+        };
 
         var preventDefault = function(e) {
             e = e || window.event;
             if (e.preventDefault) {
                 e.preventDefault();
             }
             e.returnValue = false;
-        }
+        };
 
         // Initializes this plugin. Captures the options passed in, turns this
         // off for devices that do not support fixed position, adds the spacer,
@@ -434,7 +439,7 @@
             // Capture the options for this plugin.
             base.options = $.extend({}, $.ScrollToFixed.defaultOptions, options);
 
-            originalZIndex = target.css('z-index')
+            originalZIndex = target.css('z-index');
 
             // Turn off this functionality for devices that do not support it.
             // if (!(base.options && base.options.dontCheckForPositionFixedSupport)) {
@@ -449,7 +454,7 @@
 
             // Create a spacer element to fill the void left by the target
             // element when it goes fixed.
-            spacer = $('<div />');
+            spacer = $(document.createElement('DIV'));
 
             position = target.css('position');
             originalPosition = target.css('position');
@@ -461,63 +466,62 @@
 
             // Reset the target element offsets when the window is resized, then
             // check to see if we need to fix or unfix the target element.
-            $(window).bind('resize.ScrollToFixed', windowResize);
+            $(window).on('resize.ScrollToFixed', windowResize);
 
             // When the window scrolls, check to see if we need to fix or unfix
             // the target element.
-            $(window).bind('scroll.ScrollToFixed', windowScroll);
+            $(window).on('scroll.ScrollToFixed', windowScroll);
 
             if (base.options.preFixed) {
-                target.bind('preFixed.ScrollToFixed', base.options.preFixed);
+                target.on('preFixed.ScrollToFixed', base.options.preFixed);
             }
             if (base.options.postFixed) {
-                target.bind('postFixed.ScrollToFixed', base.options.postFixed);
+                target.on('postFixed.ScrollToFixed', base.options.postFixed);
             }
             if (base.options.preUnfixed) {
-                target.bind('preUnfixed.ScrollToFixed', base.options.preUnfixed);
+                target.on('preUnfixed.ScrollToFixed', base.options.preUnfixed);
             }
             if (base.options.postUnfixed) {
-                target.bind('postUnfixed.ScrollToFixed', base.options.postUnfixed);
+                target.on('postUnfixed.ScrollToFixed', base.options.postUnfixed);
             }
             if (base.options.preAbsolute) {
-                target.bind('preAbsolute.ScrollToFixed', base.options.preAbsolute);
+                target.on('preAbsolute.ScrollToFixed', base.options.preAbsolute);
             }
             if (base.options.postAbsolute) {
-                target.bind('postAbsolute.ScrollToFixed', base.options.postAbsolute);
+                target.on('postAbsolute.ScrollToFixed', base.options.postAbsolute);
             }
             if (base.options.fixed) {
-                target.bind('fixed.ScrollToFixed', base.options.fixed);
+                target.on('fixed.ScrollToFixed', base.options.fixed);
             }
             if (base.options.unfixed) {
-                target.bind('unfixed.ScrollToFixed', base.options.unfixed);
+                target.on('unfixed.ScrollToFixed', base.options.unfixed);
             }
 
             if (base.options.spacerClass) {
                 spacer.addClass(base.options.spacerClass);
             }
 
-            target.bind('resize.ScrollToFixed', function() {
+            target.on('resize.ScrollToFixed', function() {
                 spacer.height(target.height());
             });
 
-            target.bind('scroll.ScrollToFixed', function() {
+            target.on('scroll.ScrollToFixed', function() {
                 target.trigger('preUnfixed.ScrollToFixed');
                 setUnfixed();
                 target.trigger('unfixed.ScrollToFixed');
                 checkScroll();
             });
 
-            target.bind('detach.ScrollToFixed', function(ev) {
+            target.on('detach.ScrollToFixed', function(ev) {
                 preventDefault(ev);
 
                 target.trigger('preUnfixed.ScrollToFixed');
                 setUnfixed();
                 target.trigger('unfixed.ScrollToFixed');
 
-                $(window).unbind('resize.ScrollToFixed', windowResize);
-                $(window).unbind('scroll.ScrollToFixed', windowScroll);
+                $(window).off('.ScrollToFixed');
 
-                target.unbind('.ScrollToFixed');
+                target.off('.ScrollToFixed');
 
                 //remove spacer from dom
                 spacer.remove();

test.html

@@ -90,8 +90,8 @@
 }
 </style>
 <title>ScrollToFixed Plugin Demo</title>
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
-<script src="jquery-scrolltofixed.js" type="text/javascript"></script>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
+<script src="jquery-scrolltofixed.js"></script>
 <script>
     $(document).ready(function() {
 
@@ -206,7 +206,7 @@ <h2>How?</h2>
             });
         });
     });
-</pre>             
+</pre>
                     <p>The rest of this is all Greek to me :)</p>
 
                     <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>
@@ -327,6 +327,6 @@ <h2>Sit amet mi</h2><p>Porttitor adipiscing erat. Mollis libero sit porttitor cu
             </div>
         </li>
     </ul>
-    <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>    
+    <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>
 </body>
-</html>
+</html>

tests/basic.html

@@ -23,9 +23,9 @@ <h1>The most basic floatScroll test</h1>
     <div id="test">
         floatScroll this element.
     </div>
-    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
-    <script type="text/javascript" src="../jquery-scrolltofixed.js"></script>
-    <script type="text/javascript">
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
+    <script src="../jquery-scrolltofixed.js"></script>
+    <script>
         $('#test').scrollToFixed();
     </script>
 </body>

tests/bounding_box.html

@@ -30,9 +30,9 @@ <h1>The bounding box floatScroll test</h1>
             floatScroll this element. It should stop once it reaches the end of the green box
         </div>
     </div>
-    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
-    <script type="text/javascript" src="../jquery-scrolltofixed.js"></script>
-    <script type="text/javascript">
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
+    <script src="../jquery-scrolltofixed.js"></script>
+    <script>
         $('#test').scrollToFixed({
             limit: 922
         });

tests/box_sizing_border_box.html

@@ -83,9 +83,9 @@ <h2>dontSetWidth!!!</h2>
 		</ul>
 	</div>
 </div>
-<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
-<script type="text/javascript" src="../jquery-scrolltofixed.js"></script>
-<script type="text/javascript">
+<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
+<script src="../jquery-scrolltofixed.js"></script>
+<script>
     $('#sidebar').scrollToFixed({dontSetWidth:true});
 </script>
 </body>

tests/fake_centering.html

@@ -96,9 +96,9 @@ <h3>Consectetuer adipiscing elit</h3>
 		</ul>
 	</div>
 </div>
-<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
-<script type="text/javascript" src="../jquery-scrolltofixed.js"></script>
-<script type="text/javascript">
+<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
+<script src="../jquery-scrolltofixed.js"></script>
+<script>
     $('#test').scrollToFixed();
 </script>
 </body>

tests/horizontal_scroll.html

@@ -14,7 +14,7 @@
         height: 5000px;
 	}
     body {
-        min-width: 800px; 
+        min-width: 800px;
     }
     #test {
         background: #f00;
@@ -30,9 +30,9 @@ <h1>Horizontal scroll floatScroll test</h1>
     <div id="test">
         floatScroll this element. After that, scroll the page to the left.
     </div>
-    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
-    <script type="text/javascript" src="../jquery-scrolltofixed.js"></script>
-    <script type="text/javascript">
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
+    <script src="../jquery-scrolltofixed.js"></script>
+    <script>
         $('#test').scrollToFixed();
     </script>
 </body>

tests/position_absolute.html

@@ -81,9 +81,9 @@ <h2>floatScroll!!!</h2>
 		</ul>
 	</div>
 </div>
-<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
-<script type="text/javascript" src="../jquery-scrolltofixed.js"></script>
-<script type="text/javascript">
+<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
+<script src="../jquery-scrolltofixed.js"></script>
+<script>
     $('#sidebar').scrollToFixed();
 </script>
 </body>

tests/position_absolute_in_relative.html

@@ -82,9 +82,9 @@ <h2>floatScroll!!!</h2>
 		</ul>
 	</div>
 </div>
-<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
-<script type="text/javascript" src="../jquery-scrolltofixed.js"></script>
-<script type="text/javascript">
+<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
+<script src="../jquery-scrolltofixed.js"></script>
+<script>
     $('#sidebar').scrollToFixed();
 </script>
 </body>

tests/position_absolute_margin.html

@@ -86,9 +86,9 @@ <h2>floatScroll!!!</h2>
 		</ul>
 	</div>
 </div>
-<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
-<script type="text/javascript" src="../jquery-scrolltofixed.js"></script>
-<script type="text/javascript">
+<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
+<script src="../jquery-scrolltofixed.js"></script>
+<script>
     $('#sidebar').scrollToFixed();
 </script>
 </body>

tests/position_top_arg.html

@@ -30,9 +30,9 @@ <h1>Tests that the positionTop argument passed to floatScroll() works.</h1>
     <div id="test">
         floatScroll this element.
     </div>
-    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
-    <script type="text/javascript" src="../jquery-scrolltofixed.js"></script>
-    <script type="text/javascript">
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
+    <script src="../jquery-scrolltofixed.js"></script>
+    <script>
         $('#test').scrollToFixed({marginTop: 50});
     </script>
 </body>

tests/position_with_floats.html

@@ -78,9 +78,9 @@ <h2>floatScroll!!!</h2>
 		</ul>
 	</div>
 </div>
-<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
-<script type="text/javascript" src="../jquery-scrolltofixed.js"></script>
-<script type="text/javascript">
+<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
+<script src="../jquery-scrolltofixed.js"></script>
+<script>
     $('#sidebar').scrollToFixed();
 </script>
 </body>