snipt

Ctrl+h for KB shortcuts

JavaScript

jQuery ScrollFollow with no animations

/**
 * jquery.scrollFollow.js
 * Copyright (c) 2008 Net Perspective (http://kitchen.net-perspective.com/)
 * Licensed under the MIT License (http://www.opensource.org/licenses/mit-license.php)
 * 
 * @author R.A. Ray
 *
 * @projectDescription    jQuery plugin for allowing an element to animate down as the user scrolls the page.
 * 
 * @version 0.4.0
 * 
 * @requires jquery.js (tested with 1.2.6)
 * @requires ui.core.js (tested with 1.5.2)
 * 
 * @optional jquery.cookie.js (http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/)
 * @optional jquery.easing.js (http://gsgd.co.uk/sandbox/jquery/easing/ - tested with 1.3)
 * 
 * @param speed        int - Duration of animation (in milliseconds)
 *                                 default: 500
 * @param offset            int - Number of pixels box should remain from top of viewport
 *                                 default: 0
 * @param easing        string - Any one of the easing options from the easing plugin - Requires jQuery Easing Plugin < http://gsgd.co.uk/sandbox/jquery/easing/ >
 *                                 default: 'linear'
 * @param container    string - ID of the containing div
 *                                 default: box's immediate parent
 * @param killSwitch    string - ID of the On/Off toggle element
 *                                 default: 'killSwitch'
 * @param onText        string - killSwitch text to be displayed if sliding is enabled
 *                                 default: 'Turn Slide Off'
 * @param offText        string - killSwitch text to be displayed if sliding is disabled
 *                                 default: 'Turn Slide On'
 * @param relativeTo    string - Scroll animation can be relative to either the 'top' or 'bottom' of the viewport
 *                                 default: 'top'
 * @param delay            int - Time between the end of the scroll and the beginning of the animation in milliseconds
 *                                 default: 0
 */

( function( $ ) {
    
    $.scrollFollow = function ( box, options )
    { 
        // Convert box into a jQuery object
        box = $( box );
        
        // 'box' is the object to be animated
        var position = box.css( 'position' );
        
        function ani()
        {        
            // The script runs on every scroll which really means many times during a scroll.
            // We don't want multiple slides to queue up.
            box.queue( [ ] );
        
            // A bunch of values we need to determine where to animate to
            var viewportHeight = parseInt( $( window ).height() );    
            var pageScroll =  parseInt( $( document ).scrollTop() );
            var parentTop =  parseInt( box.cont.offset().top );
            var parentHeight = parseInt( box.cont.attr( 'offsetHeight' ) );
            var boxHeight = parseInt( box.attr( 'offsetHeight' ) + ( parseInt( box.css( 'marginTop' ) ) || 0 ) + ( parseInt( box.css( 'marginBottom' ) ) || 0 ) );
            var aniTop;
            
            // Make sure the user wants the animation to happen
            if ( isActive )
            {
                // If the box should animate relative to the top of the window
                if ( options.relativeTo == 'top' )
                {
                    // Don't animate until the top of the window is close enough to the top of the box
                    if ( box.initialOffsetTop >= ( pageScroll + options.offset ) )
                    {
                        aniTop = box.initialTop;
                    }
                    else
                    {
                        aniTop = Math.min( ( Math.max( ( -parentTop ), ( pageScroll - box.initialOffsetTop + box.initialTop ) ) + options.offset ), ( parentHeight - boxHeight - box.paddingAdjustment ) );
                    }
                }
                // If the box should animate relative to the bottom of the window
                else if ( options.relativeTo == 'bottom' )
                {
                    // Don't animate until the bottom of the window is close enough to the bottom of the box
                    if ( ( box.initialOffsetTop + boxHeight ) >= ( pageScroll + options.offset + viewportHeight ) )
                    {
                        aniTop = box.initialTop;
                    }
                    else
                    {
                        aniTop = Math.min( ( pageScroll + viewportHeight - boxHeight - options.offset ), ( parentHeight - boxHeight ) );
                    }
                }
                
                // Checks to see if the relevant scroll was the last one
                // "-20" is to account for inaccuracy in the timeout
                if ( ( new Date().getTime() - box.lastScroll ) >= ( options.delay - 20 ) )
                {
                    box.css(
                        {
                            top: aniTop
                        }
                    );
                }
            }
        };
        
        // For user-initiated stopping of the slide
        var isActive = true;
        
        if ( $.cookie != undefined )
        {
            if( $.cookie( 'scrollFollowSetting' + box.attr( 'id' ) ) == 'false' )
            {
                var isActive = false;
                
                $( '#' + options.killSwitch ).text( options.offText )
                    .toggle( 
                        function ()
                        {
                            isActive = true;
                            
                            $( this ).text( options.onText );
                            
                            $.cookie( 'scrollFollowSetting' + box.attr( 'id' ), true, { expires: 365, path: '/'} );
                            
                            ani();
                        },
                        function ()
                        {
                            isActive = false;
                            
                            $( this ).text( options.offText );
                            
                            box.css(
                                {
                                    top: box.initialTop
                                }
                            );    
                            
                            $.cookie( 'scrollFollowSetting' + box.attr( 'id' ), false, { expires: 365, path: '/'} );
                        }
                    );
            }
            else
            {
                $( '#' + options.killSwitch ).text( options.onText )
                    .toggle( 
                        function ()
                        {
                            isActive = false;
                            $( this ).text( options.offText );
                            box.css(
                                {
                                    top: box.initialTop
                                }
                            );    
                            $.cookie( 'scrollFollowSetting' + box.attr( 'id' ), false, { expires: 365, path: '/'} );
                        },
                        function ()
                        {
                            isActive = true;
                            $( this ).text( options.onText );
                            $.cookie( 'scrollFollowSetting' + box.attr( 'id' ), true, { expires: 365, path: '/'} );
                            ani();
                        }
                    );
            }
        }
        
        // If no parent ID was specified, and the immediate parent does not have an ID
        // options.container will be undefined. So we need to figure out the parent element.
        if ( options.container == '')
        {
            box.cont = box.parent();
        }
        else
        {
            box.cont = $( '#' + options.container );
        }
        
        // Finds the default positioning of the box.
        box.initialOffsetTop =  parseInt( box.offset().top );
        box.initialTop = parseInt( box.css( 'top' ) ) || 0;
        
        // Hack to fix different treatment of boxes positioned 'absolute' and 'relative'
        if ( box.css( 'position' ) == 'relative' )
        {
            box.paddingAdjustment = parseInt( box.cont.css( 'paddingTop' ) ) + parseInt( box.cont.css( 'paddingBottom' ) );
        }
        else
        {
            box.paddingAdjustment = 0;
        }
        
        // Animate the box when the page is scrolled
        $( window ).scroll( function ()
            {
                // Sets up the delay of the animation
                $.fn.scrollFollow.interval = ani();
                
                // To check against right before setting the animation
                box.lastScroll = new Date().getTime();
            }
        );
        
        // Animate the box when the page is resized
        $( window ).resize( function ()
            {
                // Sets up the delay of the animation
                $.fn.scrollFollow.interval = ani();
                
                // To check against right before setting the animation
                box.lastScroll = new Date().getTime();
            }
        );

        // Run an initial animation on page load
        box.lastScroll = 0;
        
        ani();
    };
    
    $.fn.scrollFollow = function ( options )
    {
        options = options || {};
        options.relativeTo = options.relativeTo || 'top';
        options.speed = options.speed || 500;
        options.offset = options.offset || 0;
        options.easing = options.easing || 'swing';
        options.container = options.container || this.parent().attr( 'id' );
        options.killSwitch = options.killSwitch || 'killSwitch';
        options.onText = options.onText || 'Turn Slide Off';
        options.offText = options.offText || 'Turn Slide On';
        options.delay = options.delay || 0;
        
        this.each( function() 
            {
                new $.scrollFollow( this, options );
            }
        );
        
        return this;
    };
})( jQuery );
https://snipt.net/embed/4b5d8e6bd35803985fcada54986a7393/
/raw/4b5d8e6bd35803985fcada54986a7393/
4b5d8e6bd35803985fcada54986a7393
js
JavaScript
245
2019-07-21T20:05:15
True
False
False
/api/public/snipt/15195/
jquery-scrollfollow-with-no-animations
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10"> 10</a> <a href="#L-11"> 11</a> <a href="#L-12"> 12</a> <a href="#L-13"> 13</a> <a href="#L-14"> 14</a> <a href="#L-15"> 15</a> <a href="#L-16"> 16</a> <a href="#L-17"> 17</a> <a href="#L-18"> 18</a> <a href="#L-19"> 19</a> <a href="#L-20"> 20</a> <a href="#L-21"> 21</a> <a href="#L-22"> 22</a> <a href="#L-23"> 23</a> <a href="#L-24"> 24</a> <a href="#L-25"> 25</a> <a href="#L-26"> 26</a> <a href="#L-27"> 27</a> <a href="#L-28"> 28</a> <a href="#L-29"> 29</a> <a href="#L-30"> 30</a> <a href="#L-31"> 31</a> <a href="#L-32"> 32</a> <a href="#L-33"> 33</a> <a href="#L-34"> 34</a> <a href="#L-35"> 35</a> <a href="#L-36"> 36</a> <a href="#L-37"> 37</a> <a href="#L-38"> 38</a> <a href="#L-39"> 39</a> <a href="#L-40"> 40</a> <a href="#L-41"> 41</a> <a href="#L-42"> 42</a> <a href="#L-43"> 43</a> <a href="#L-44"> 44</a> <a href="#L-45"> 45</a> <a href="#L-46"> 46</a> <a href="#L-47"> 47</a> <a href="#L-48"> 48</a> <a href="#L-49"> 49</a> <a href="#L-50"> 50</a> <a href="#L-51"> 51</a> <a href="#L-52"> 52</a> <a href="#L-53"> 53</a> <a href="#L-54"> 54</a> <a href="#L-55"> 55</a> <a href="#L-56"> 56</a> <a href="#L-57"> 57</a> <a href="#L-58"> 58</a> <a href="#L-59"> 59</a> <a href="#L-60"> 60</a> <a href="#L-61"> 61</a> <a href="#L-62"> 62</a> <a href="#L-63"> 63</a> <a href="#L-64"> 64</a> <a href="#L-65"> 65</a> <a href="#L-66"> 66</a> <a href="#L-67"> 67</a> <a href="#L-68"> 68</a> <a href="#L-69"> 69</a> <a href="#L-70"> 70</a> <a href="#L-71"> 71</a> <a href="#L-72"> 72</a> <a href="#L-73"> 73</a> <a href="#L-74"> 74</a> <a href="#L-75"> 75</a> <a href="#L-76"> 76</a> <a href="#L-77"> 77</a> <a href="#L-78"> 78</a> <a href="#L-79"> 79</a> <a href="#L-80"> 80</a> <a href="#L-81"> 81</a> <a href="#L-82"> 82</a> <a href="#L-83"> 83</a> <a href="#L-84"> 84</a> <a href="#L-85"> 85</a> <a href="#L-86"> 86</a> <a href="#L-87"> 87</a> <a href="#L-88"> 88</a> <a href="#L-89"> 89</a> <a href="#L-90"> 90</a> <a href="#L-91"> 91</a> <a href="#L-92"> 92</a> <a href="#L-93"> 93</a> <a href="#L-94"> 94</a> <a href="#L-95"> 95</a> <a href="#L-96"> 96</a> <a href="#L-97"> 97</a> <a href="#L-98"> 98</a> <a href="#L-99"> 99</a> <a href="#L-100">100</a> <a href="#L-101">101</a> <a href="#L-102">102</a> <a href="#L-103">103</a> <a href="#L-104">104</a> <a href="#L-105">105</a> <a href="#L-106">106</a> <a href="#L-107">107</a> <a href="#L-108">108</a> <a href="#L-109">109</a> <a href="#L-110">110</a> <a href="#L-111">111</a> <a href="#L-112">112</a> <a href="#L-113">113</a> <a href="#L-114">114</a> <a href="#L-115">115</a> <a href="#L-116">116</a> <a href="#L-117">117</a> <a href="#L-118">118</a> <a href="#L-119">119</a> <a href="#L-120">120</a> <a href="#L-121">121</a> <a href="#L-122">122</a> <a href="#L-123">123</a> <a href="#L-124">124</a> <a href="#L-125">125</a> <a href="#L-126">126</a> <a href="#L-127">127</a> <a href="#L-128">128</a> <a href="#L-129">129</a> <a href="#L-130">130</a> <a href="#L-131">131</a> <a href="#L-132">132</a> <a href="#L-133">133</a> <a href="#L-134">134</a> <a href="#L-135">135</a> <a href="#L-136">136</a> <a href="#L-137">137</a> <a href="#L-138">138</a> <a href="#L-139">139</a> <a href="#L-140">140</a> <a href="#L-141">141</a> <a href="#L-142">142</a> <a href="#L-143">143</a> <a href="#L-144">144</a> <a href="#L-145">145</a> <a href="#L-146">146</a> <a href="#L-147">147</a> <a href="#L-148">148</a> <a href="#L-149">149</a> <a href="#L-150">150</a> <a href="#L-151">151</a> <a href="#L-152">152</a> <a href="#L-153">153</a> <a href="#L-154">154</a> <a href="#L-155">155</a> <a href="#L-156">156</a> <a href="#L-157">157</a> <a href="#L-158">158</a> <a href="#L-159">159</a> <a href="#L-160">160</a> <a href="#L-161">161</a> <a href="#L-162">162</a> <a href="#L-163">163</a> <a href="#L-164">164</a> <a href="#L-165">165</a> <a href="#L-166">166</a> <a href="#L-167">167</a> <a href="#L-168">168</a> <a href="#L-169">169</a> <a href="#L-170">170</a> <a href="#L-171">171</a> <a href="#L-172">172</a> <a href="#L-173">173</a> <a href="#L-174">174</a> <a href="#L-175">175</a> <a href="#L-176">176</a> <a href="#L-177">177</a> <a href="#L-178">178</a> <a href="#L-179">179</a> <a href="#L-180">180</a> <a href="#L-181">181</a> <a href="#L-182">182</a> <a href="#L-183">183</a> <a href="#L-184">184</a> <a href="#L-185">185</a> <a href="#L-186">186</a> <a href="#L-187">187</a> <a href="#L-188">188</a> <a href="#L-189">189</a> <a href="#L-190">190</a> <a href="#L-191">191</a> <a href="#L-192">192</a> <a href="#L-193">193</a> <a href="#L-194">194</a> <a href="#L-195">195</a> <a href="#L-196">196</a> <a href="#L-197">197</a> <a href="#L-198">198</a> <a href="#L-199">199</a> <a href="#L-200">200</a> <a href="#L-201">201</a> <a href="#L-202">202</a> <a href="#L-203">203</a> <a href="#L-204">204</a> <a href="#L-205">205</a> <a href="#L-206">206</a> <a href="#L-207">207</a> <a href="#L-208">208</a> <a href="#L-209">209</a> <a href="#L-210">210</a> <a href="#L-211">211</a> <a href="#L-212">212</a> <a href="#L-213">213</a> <a href="#L-214">214</a> <a href="#L-215">215</a> <a href="#L-216">216</a> <a href="#L-217">217</a> <a href="#L-218">218</a> <a href="#L-219">219</a> <a href="#L-220">220</a> <a href="#L-221">221</a> <a href="#L-222">222</a> <a href="#L-223">223</a> <a href="#L-224">224</a> <a href="#L-225">225</a> <a href="#L-226">226</a> <a href="#L-227">227</a> <a href="#L-228">228</a> <a href="#L-229">229</a> <a href="#L-230">230</a> <a href="#L-231">231</a> <a href="#L-232">232</a> <a href="#L-233">233</a> <a href="#L-234">234</a> <a href="#L-235">235</a> <a href="#L-236">236</a> <a href="#L-237">237</a> <a href="#L-238">238</a> <a href="#L-239">239</a> <a href="#L-240">240</a> <a href="#L-241">241</a> <a href="#L-242">242</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a><span class="cm">/**</span> </span><span id="L-2"><a name="L-2"></a><span class="cm"> * jquery.scrollFollow.js</span> </span><span id="L-3"><a name="L-3"></a><span class="cm"> * Copyright (c) 2008 Net Perspective (http://kitchen.net-perspective.com/)</span> </span><span id="L-4"><a name="L-4"></a><span class="cm"> * Licensed under the MIT License (http://www.opensource.org/licenses/mit-license.php)</span> </span><span id="L-5"><a name="L-5"></a><span class="cm"> * </span> </span><span id="L-6"><a name="L-6"></a><span class="cm"> * @author R.A. Ray</span> </span><span id="L-7"><a name="L-7"></a><span class="cm"> *</span> </span><span id="L-8"><a name="L-8"></a><span class="cm"> * @projectDescription jQuery plugin for allowing an element to animate down as the user scrolls the page.</span> </span><span id="L-9"><a name="L-9"></a><span class="cm"> * </span> </span><span id="L-10"><a name="L-10"></a><span class="cm"> * @version 0.4.0</span> </span><span id="L-11"><a name="L-11"></a><span class="cm"> * </span> </span><span id="L-12"><a name="L-12"></a><span class="cm"> * @requires jquery.js (tested with 1.2.6)</span> </span><span id="L-13"><a name="L-13"></a><span class="cm"> * @requires ui.core.js (tested with 1.5.2)</span> </span><span id="L-14"><a name="L-14"></a><span class="cm"> * </span> </span><span id="L-15"><a name="L-15"></a><span class="cm"> * @optional jquery.cookie.js (http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/)</span> </span><span id="L-16"><a name="L-16"></a><span class="cm"> * @optional jquery.easing.js (http://gsgd.co.uk/sandbox/jquery/easing/ - tested with 1.3)</span> </span><span id="L-17"><a name="L-17"></a><span class="cm"> * </span> </span><span id="L-18"><a name="L-18"></a><span class="cm"> * @param speed int - Duration of animation (in milliseconds)</span> </span><span id="L-19"><a name="L-19"></a><span class="cm"> * default: 500</span> </span><span id="L-20"><a name="L-20"></a><span class="cm"> * @param offset int - Number of pixels box should remain from top of viewport</span> </span><span id="L-21"><a name="L-21"></a><span class="cm"> * default: 0</span> </span><span id="L-22"><a name="L-22"></a><span class="cm"> * @param easing string - Any one of the easing options from the easing plugin - Requires jQuery Easing Plugin &lt; http://gsgd.co.uk/sandbox/jquery/easing/ &gt;</span> </span><span id="L-23"><a name="L-23"></a><span class="cm"> * default: &#39;linear&#39;</span> </span><span id="L-24"><a name="L-24"></a><span class="cm"> * @param container string - ID of the containing div</span> </span><span id="L-25"><a name="L-25"></a><span class="cm"> * default: box&#39;s immediate parent</span> </span><span id="L-26"><a name="L-26"></a><span class="cm"> * @param killSwitch string - ID of the On/Off toggle element</span> </span><span id="L-27"><a name="L-27"></a><span class="cm"> * default: &#39;killSwitch&#39;</span> </span><span id="L-28"><a name="L-28"></a><span class="cm"> * @param onText string - killSwitch text to be displayed if sliding is enabled</span> </span><span id="L-29"><a name="L-29"></a><span class="cm"> * default: &#39;Turn Slide Off&#39;</span> </span><span id="L-30"><a name="L-30"></a><span class="cm"> * @param offText string - killSwitch text to be displayed if sliding is disabled</span> </span><span id="L-31"><a name="L-31"></a><span class="cm"> * default: &#39;Turn Slide On&#39;</span> </span><span id="L-32"><a name="L-32"></a><span class="cm"> * @param relativeTo string - Scroll animation can be relative to either the &#39;top&#39; or &#39;bottom&#39; of the viewport</span> </span><span id="L-33"><a name="L-33"></a><span class="cm"> * default: &#39;top&#39;</span> </span><span id="L-34"><a name="L-34"></a><span class="cm"> * @param delay int - Time between the end of the scroll and the beginning of the animation in milliseconds</span> </span><span id="L-35"><a name="L-35"></a><span class="cm"> * default: 0</span> </span><span id="L-36"><a name="L-36"></a><span class="cm"> */</span> </span><span id="L-37"><a name="L-37"></a> </span><span id="L-38"><a name="L-38"></a><span class="p">(</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">$</span> <span class="p">)</span> <span class="p">{</span> </span><span id="L-39"><a name="L-39"></a> </span><span id="L-40"><a name="L-40"></a> <span class="nx">$</span><span class="p">.</span><span class="nx">scrollFollow</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span> <span class="nx">box</span><span class="p">,</span> <span class="nx">options</span> <span class="p">)</span> </span><span id="L-41"><a name="L-41"></a> <span class="p">{</span> </span><span id="L-42"><a name="L-42"></a> <span class="c1">// Convert box into a jQuery object</span> </span><span id="L-43"><a name="L-43"></a> <span class="nx">box</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span> <span class="nx">box</span> <span class="p">);</span> </span><span id="L-44"><a name="L-44"></a> </span><span id="L-45"><a name="L-45"></a> <span class="c1">// &#39;box&#39; is the object to be animated</span> </span><span id="L-46"><a name="L-46"></a> <span class="kd">var</span> <span class="nx">position</span> <span class="o">=</span> <span class="nx">box</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span> <span class="s1">&#39;position&#39;</span> <span class="p">);</span> </span><span id="L-47"><a name="L-47"></a> </span><span id="L-48"><a name="L-48"></a> <span class="kd">function</span> <span class="nx">ani</span><span class="p">()</span> </span><span id="L-49"><a name="L-49"></a> <span class="p">{</span> </span><span id="L-50"><a name="L-50"></a> <span class="c1">// The script runs on every scroll which really means many times during a scroll.</span> </span><span id="L-51"><a name="L-51"></a> <span class="c1">// We don&#39;t want multiple slides to queue up.</span> </span><span id="L-52"><a name="L-52"></a> <span class="nx">box</span><span class="p">.</span><span class="nx">queue</span><span class="p">(</span> <span class="p">[</span> <span class="p">]</span> <span class="p">);</span> </span><span id="L-53"><a name="L-53"></a> </span><span id="L-54"><a name="L-54"></a> <span class="c1">// A bunch of values we need to determine where to animate to</span> </span><span id="L-55"><a name="L-55"></a> <span class="kd">var</span> <span class="nx">viewportHeight</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span> <span class="nx">$</span><span class="p">(</span> <span class="nb">window</span> <span class="p">).</span><span class="nx">height</span><span class="p">()</span> <span class="p">);</span> </span><span id="L-56"><a name="L-56"></a> <span class="kd">var</span> <span class="nx">pageScroll</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span> <span class="nx">$</span><span class="p">(</span> <span class="nb">document</span> <span class="p">).</span><span class="nx">scrollTop</span><span class="p">()</span> <span class="p">);</span> </span><span id="L-57"><a name="L-57"></a> <span class="kd">var</span> <span class="nx">parentTop</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span> <span class="nx">box</span><span class="p">.</span><span class="nx">cont</span><span class="p">.</span><span class="nx">offset</span><span class="p">().</span><span class="nx">top</span> <span class="p">);</span> </span><span id="L-58"><a name="L-58"></a> <span class="kd">var</span> <span class="nx">parentHeight</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span> <span class="nx">box</span><span class="p">.</span><span class="nx">cont</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span> <span class="s1">&#39;offsetHeight&#39;</span> <span class="p">)</span> <span class="p">);</span> </span><span id="L-59"><a name="L-59"></a> <span class="kd">var</span> <span class="nx">boxHeight</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span> <span class="nx">box</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span> <span class="s1">&#39;offsetHeight&#39;</span> <span class="p">)</span> <span class="o">+</span> <span class="p">(</span> <span class="nb">parseInt</span><span class="p">(</span> <span class="nx">box</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span> <span class="s1">&#39;marginTop&#39;</span> <span class="p">)</span> <span class="p">)</span> <span class="o">||</span> <span class="mi">0</span> <span class="p">)</span> <span class="o">+</span> <span class="p">(</span> <span class="nb">parseInt</span><span class="p">(</span> <span class="nx">box</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span> <span class="s1">&#39;marginBottom&#39;</span> <span class="p">)</span> <span class="p">)</span> <span class="o">||</span> <span class="mi">0</span> <span class="p">)</span> <span class="p">);</span> </span><span id="L-60"><a name="L-60"></a> <span class="kd">var</span> <span class="nx">aniTop</span><span class="p">;</span> </span><span id="L-61"><a name="L-61"></a> </span><span id="L-62"><a name="L-62"></a> <span class="c1">// Make sure the user wants the animation to happen</span> </span><span id="L-63"><a name="L-63"></a> <span class="k">if</span> <span class="p">(</span> <span class="nx">isActive</span> <span class="p">)</span> </span><span id="L-64"><a name="L-64"></a> <span class="p">{</span> </span><span id="L-65"><a name="L-65"></a> <span class="c1">// If the box should animate relative to the top of the window</span> </span><span id="L-66"><a name="L-66"></a> <span class="k">if</span> <span class="p">(</span> <span class="nx">options</span><span class="p">.</span><span class="nx">relativeTo</span> <span class="o">==</span> <span class="s1">&#39;top&#39;</span> <span class="p">)</span> </span><span id="L-67"><a name="L-67"></a> <span class="p">{</span> </span><span id="L-68"><a name="L-68"></a> <span class="c1">// Don&#39;t animate until the top of the window is close enough to the top of the box</span> </span><span id="L-69"><a name="L-69"></a> <span class="k">if</span> <span class="p">(</span> <span class="nx">box</span><span class="p">.</span><span class="nx">initialOffsetTop</span> <span class="o">&gt;=</span> <span class="p">(</span> <span class="nx">pageScroll</span> <span class="o">+</span> <span class="nx">options</span><span class="p">.</span><span class="nx">offset</span> <span class="p">)</span> <span class="p">)</span> </span><span id="L-70"><a name="L-70"></a> <span class="p">{</span> </span><span id="L-71"><a name="L-71"></a> <span class="nx">aniTop</span> <span class="o">=</span> <span class="nx">box</span><span class="p">.</span><span class="nx">initialTop</span><span class="p">;</span> </span><span id="L-72"><a name="L-72"></a> <span class="p">}</span> </span><span id="L-73"><a name="L-73"></a> <span class="k">else</span> </span><span id="L-74"><a name="L-74"></a> <span class="p">{</span> </span><span id="L-75"><a name="L-75"></a> <span class="nx">aniTop</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span> <span class="p">(</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span> <span class="p">(</span> <span class="o">-</span><span class="nx">parentTop</span> <span class="p">),</span> <span class="p">(</span> <span class="nx">pageScroll</span> <span class="o">-</span> <span class="nx">box</span><span class="p">.</span><span class="nx">initialOffsetTop</span> <span class="o">+</span> <span class="nx">box</span><span class="p">.</span><span class="nx">initialTop</span> <span class="p">)</span> <span class="p">)</span> <span class="o">+</span> <span class="nx">options</span><span class="p">.</span><span class="nx">offset</span> <span class="p">),</span> <span class="p">(</span> <span class="nx">parentHeight</span> <span class="o">-</span> <span class="nx">boxHeight</span> <span class="o">-</span> <span class="nx">box</span><span class="p">.</span><span class="nx">paddingAdjustment</span> <span class="p">)</span> <span class="p">);</span> </span><span id="L-76"><a name="L-76"></a> <span class="p">}</span> </span><span id="L-77"><a name="L-77"></a> <span class="p">}</span> </span><span id="L-78"><a name="L-78"></a> <span class="c1">// If the box should animate relative to the bottom of the window</span> </span><span id="L-79"><a name="L-79"></a> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span> <span class="nx">options</span><span class="p">.</span><span class="nx">relativeTo</span> <span class="o">==</span> <span class="s1">&#39;bottom&#39;</span> <span class="p">)</span> </span><span id="L-80"><a name="L-80"></a> <span class="p">{</span> </span><span id="L-81"><a name="L-81"></a> <span class="c1">// Don&#39;t animate until the bottom of the window is close enough to the bottom of the box</span> </span><span id="L-82"><a name="L-82"></a> <span class="k">if</span> <span class="p">(</span> <span class="p">(</span> <span class="nx">box</span><span class="p">.</span><span class="nx">initialOffsetTop</span> <span class="o">+</span> <span class="nx">boxHeight</span> <span class="p">)</span> <span class="o">&gt;=</span> <span class="p">(</span> <span class="nx">pageScroll</span> <span class="o">+</span> <span class="nx">options</span><span class="p">.</span><span class="nx">offset</span> <span class="o">+</span> <span class="nx">viewportHeight</span> <span class="p">)</span> <span class="p">)</span> </span><span id="L-83"><a name="L-83"></a> <span class="p">{</span> </span><span id="L-84"><a name="L-84"></a> <span class="nx">aniTop</span> <span class="o">=</span> <span class="nx">box</span><span class="p">.</span><span class="nx">initialTop</span><span class="p">;</span> </span><span id="L-85"><a name="L-85"></a> <span class="p">}</span> </span><span id="L-86"><a name="L-86"></a> <span class="k">else</span> </span><span id="L-87"><a name="L-87"></a> <span class="p">{</span> </span><span id="L-88"><a name="L-88"></a> <span class="nx">aniTop</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span> <span class="p">(</span> <span class="nx">pageScroll</span> <span class="o">+</span> <span class="nx">viewportHeight</span> <span class="o">-</span> <span class="nx">boxHeight</span> <span class="o">-</span> <span class="nx">options</span><span class="p">.</span><span class="nx">offset</span> <span class="p">),</span> <span class="p">(</span> <span class="nx">parentHeight</span> <span class="o">-</span> <span class="nx">boxHeight</span> <span class="p">)</span> <span class="p">);</span> </span><span id="L-89"><a name="L-89"></a> <span class="p">}</span> </span><span id="L-90"><a name="L-90"></a> <span class="p">}</span> </span><span id="L-91"><a name="L-91"></a> </span><span id="L-92"><a name="L-92"></a> <span class="c1">// Checks to see if the relevant scroll was the last one</span> </span><span id="L-93"><a name="L-93"></a> <span class="c1">// &quot;-20&quot; is to account for inaccuracy in the timeout</span> </span><span id="L-94"><a name="L-94"></a> <span class="k">if</span> <span class="p">(</span> <span class="p">(</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">getTime</span><span class="p">()</span> <span class="o">-</span> <span class="nx">box</span><span class="p">.</span><span class="nx">lastScroll</span> <span class="p">)</span> <span class="o">&gt;=</span> <span class="p">(</span> <span class="nx">options</span><span class="p">.</span><span class="nx">delay</span> <span class="o">-</span> <span class="mi">20</span> <span class="p">)</span> <span class="p">)</span> </span><span id="L-95"><a name="L-95"></a> <span class="p">{</span> </span><span id="L-96"><a name="L-96"></a> <span class="nx">box</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span> </span><span id="L-97"><a name="L-97"></a> <span class="p">{</span> </span><span id="L-98"><a name="L-98"></a> <span class="nx">top</span><span class="o">:</span> <span class="nx">aniTop</span> </span><span id="L-99"><a name="L-99"></a> <span class="p">}</span> </span><span id="L-100"><a name="L-100"></a> <span class="p">);</span> </span><span id="L-101"><a name="L-101"></a> <span class="p">}</span> </span><span id="L-102"><a name="L-102"></a> <span class="p">}</span> </span><span id="L-103"><a name="L-103"></a> <span class="p">};</span> </span><span id="L-104"><a name="L-104"></a> </span><span id="L-105"><a name="L-105"></a> <span class="c1">// For user-initiated stopping of the slide</span> </span><span id="L-106"><a name="L-106"></a> <span class="kd">var</span> <span class="nx">isActive</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> </span><span id="L-107"><a name="L-107"></a> </span><span id="L-108"><a name="L-108"></a> <span class="k">if</span> <span class="p">(</span> <span class="nx">$</span><span class="p">.</span><span class="nx">cookie</span> <span class="o">!=</span> <span class="kc">undefined</span> <span class="p">)</span> </span><span id="L-109"><a name="L-109"></a> <span class="p">{</span> </span><span id="L-110"><a name="L-110"></a> <span class="k">if</span><span class="p">(</span> <span class="nx">$</span><span class="p">.</span><span class="nx">cookie</span><span class="p">(</span> <span class="s1">&#39;scrollFollowSetting&#39;</span> <span class="o">+</span> <span class="nx">box</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span> <span class="s1">&#39;id&#39;</span> <span class="p">)</span> <span class="p">)</span> <span class="o">==</span> <span class="s1">&#39;false&#39;</span> <span class="p">)</span> </span><span id="L-111"><a name="L-111"></a> <span class="p">{</span> </span><span id="L-112"><a name="L-112"></a> <span class="kd">var</span> <span class="nx">isActive</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span> </span><span id="L-113"><a name="L-113"></a> </span><span id="L-114"><a name="L-114"></a> <span class="nx">$</span><span class="p">(</span> <span class="s1">&#39;#&#39;</span> <span class="o">+</span> <span class="nx">options</span><span class="p">.</span><span class="nx">killSwitch</span> <span class="p">).</span><span class="nx">text</span><span class="p">(</span> <span class="nx">options</span><span class="p">.</span><span class="nx">offText</span> <span class="p">)</span> </span><span id="L-115"><a name="L-115"></a> <span class="p">.</span><span class="nx">toggle</span><span class="p">(</span> </span><span id="L-116"><a name="L-116"></a> <span class="kd">function</span> <span class="p">()</span> </span><span id="L-117"><a name="L-117"></a> <span class="p">{</span> </span><span id="L-118"><a name="L-118"></a> <span class="nx">isActive</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> </span><span id="L-119"><a name="L-119"></a> </span><span id="L-120"><a name="L-120"></a> <span class="nx">$</span><span class="p">(</span> <span class="k">this</span> <span class="p">).</span><span class="nx">text</span><span class="p">(</span> <span class="nx">options</span><span class="p">.</span><span class="nx">onText</span> <span class="p">);</span> </span><span id="L-121"><a name="L-121"></a> </span><span id="L-122"><a name="L-122"></a> <span class="nx">$</span><span class="p">.</span><span class="nx">cookie</span><span class="p">(</span> <span class="s1">&#39;scrollFollowSetting&#39;</span> <span class="o">+</span> <span class="nx">box</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span> <span class="s1">&#39;id&#39;</span> <span class="p">),</span> <span class="kc">true</span><span class="p">,</span> <span class="p">{</span> <span class="nx">expires</span><span class="o">:</span> <span class="mi">365</span><span class="p">,</span> <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/&#39;</span><span class="p">}</span> <span class="p">);</span> </span><span id="L-123"><a name="L-123"></a> </span><span id="L-124"><a name="L-124"></a> <span class="nx">ani</span><span class="p">();</span> </span><span id="L-125"><a name="L-125"></a> <span class="p">},</span> </span><span id="L-126"><a name="L-126"></a> <span class="kd">function</span> <span class="p">()</span> </span><span id="L-127"><a name="L-127"></a> <span class="p">{</span> </span><span id="L-128"><a name="L-128"></a> <span class="nx">isActive</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span> </span><span id="L-129"><a name="L-129"></a> </span><span id="L-130"><a name="L-130"></a> <span class="nx">$</span><span class="p">(</span> <span class="k">this</span> <span class="p">).</span><span class="nx">text</span><span class="p">(</span> <span class="nx">options</span><span class="p">.</span><span class="nx">offText</span> <span class="p">);</span> </span><span id="L-131"><a name="L-131"></a> </span><span id="L-132"><a name="L-132"></a> <span class="nx">box</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span> </span><span id="L-133"><a name="L-133"></a> <span class="p">{</span> </span><span id="L-134"><a name="L-134"></a> <span class="nx">top</span><span class="o">:</span> <span class="nx">box</span><span class="p">.</span><span class="nx">initialTop</span> </span><span id="L-135"><a name="L-135"></a> <span class="p">}</span> </span><span id="L-136"><a name="L-136"></a> <span class="p">);</span> </span><span id="L-137"><a name="L-137"></a> </span><span id="L-138"><a name="L-138"></a> <span class="nx">$</span><span class="p">.</span><span class="nx">cookie</span><span class="p">(</span> <span class="s1">&#39;scrollFollowSetting&#39;</span> <span class="o">+</span> <span class="nx">box</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span> <span class="s1">&#39;id&#39;</span> <span class="p">),</span> <span class="kc">false</span><span class="p">,</span> <span class="p">{</span> <span class="nx">expires</span><span class="o">:</span> <span class="mi">365</span><span class="p">,</span> <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/&#39;</span><span class="p">}</span> <span class="p">);</span> </span><span id="L-139"><a name="L-139"></a> <span class="p">}</span> </span><span id="L-140"><a name="L-140"></a> <span class="p">);</span> </span><span id="L-141"><a name="L-141"></a> <span class="p">}</span> </span><span id="L-142"><a name="L-142"></a> <span class="k">else</span> </span><span id="L-143"><a name="L-143"></a> <span class="p">{</span> </span><span id="L-144"><a name="L-144"></a> <span class="nx">$</span><span class="p">(</span> <span class="s1">&#39;#&#39;</span> <span class="o">+</span> <span class="nx">options</span><span class="p">.</span><span class="nx">killSwitch</span> <span class="p">).</span><span class="nx">text</span><span class="p">(</span> <span class="nx">options</span><span class="p">.</span><span class="nx">onText</span> <span class="p">)</span> </span><span id="L-145"><a name="L-145"></a> <span class="p">.</span><span class="nx">toggle</span><span class="p">(</span> </span><span id="L-146"><a name="L-146"></a> <span class="kd">function</span> <span class="p">()</span> </span><span id="L-147"><a name="L-147"></a> <span class="p">{</span> </span><span id="L-148"><a name="L-148"></a> <span class="nx">isActive</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span> </span><span id="L-149"><a name="L-149"></a> <span class="nx">$</span><span class="p">(</span> <span class="k">this</span> <span class="p">).</span><span class="nx">text</span><span class="p">(</span> <span class="nx">options</span><span class="p">.</span><span class="nx">offText</span> <span class="p">);</span> </span><span id="L-150"><a name="L-150"></a> <span class="nx">box</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span> </span><span id="L-151"><a name="L-151"></a> <span class="p">{</span> </span><span id="L-152"><a name="L-152"></a> <span class="nx">top</span><span class="o">:</span> <span class="nx">box</span><span class="p">.</span><span class="nx">initialTop</span> </span><span id="L-153"><a name="L-153"></a> <span class="p">}</span> </span><span id="L-154"><a name="L-154"></a> <span class="p">);</span> </span><span id="L-155"><a name="L-155"></a> <span class="nx">$</span><span class="p">.</span><span class="nx">cookie</span><span class="p">(</span> <span class="s1">&#39;scrollFollowSetting&#39;</span> <span class="o">+</span> <span class="nx">box</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span> <span class="s1">&#39;id&#39;</span> <span class="p">),</span> <span class="kc">false</span><span class="p">,</span> <span class="p">{</span> <span class="nx">expires</span><span class="o">:</span> <span class="mi">365</span><span class="p">,</span> <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/&#39;</span><span class="p">}</span> <span class="p">);</span> </span><span id="L-156"><a name="L-156"></a> <span class="p">},</span> </span><span id="L-157"><a name="L-157"></a> <span class="kd">function</span> <span class="p">()</span> </span><span id="L-158"><a name="L-158"></a> <span class="p">{</span> </span><span id="L-159"><a name="L-159"></a> <span class="nx">isActive</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> </span><span id="L-160"><a name="L-160"></a> <span class="nx">$</span><span class="p">(</span> <span class="k">this</span> <span class="p">).</span><span class="nx">text</span><span class="p">(</span> <span class="nx">options</span><span class="p">.</span><span class="nx">onText</span> <span class="p">);</span> </span><span id="L-161"><a name="L-161"></a> <span class="nx">$</span><span class="p">.</span><span class="nx">cookie</span><span class="p">(</span> <span class="s1">&#39;scrollFollowSetting&#39;</span> <span class="o">+</span> <span class="nx">box</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span> <span class="s1">&#39;id&#39;</span> <span class="p">),</span> <span class="kc">true</span><span class="p">,</span> <span class="p">{</span> <span class="nx">expires</span><span class="o">:</span> <span class="mi">365</span><span class="p">,</span> <span class="nx">path</span><span class="o">:</span> <span class="s1">&#39;/&#39;</span><span class="p">}</span> <span class="p">);</span> </span><span id="L-162"><a name="L-162"></a> <span class="nx">ani</span><span class="p">();</span> </span><span id="L-163"><a name="L-163"></a> <span class="p">}</span> </span><span id="L-164"><a name="L-164"></a> <span class="p">);</span> </span><span id="L-165"><a name="L-165"></a> <span class="p">}</span> </span><span id="L-166"><a name="L-166"></a> <span class="p">}</span> </span><span id="L-167"><a name="L-167"></a> </span><span id="L-168"><a name="L-168"></a> <span class="c1">// If no parent ID was specified, and the immediate parent does not have an ID</span> </span><span id="L-169"><a name="L-169"></a> <span class="c1">// options.container will be undefined. So we need to figure out the parent element.</span> </span><span id="L-170"><a name="L-170"></a> <span class="k">if</span> <span class="p">(</span> <span class="nx">options</span><span class="p">.</span><span class="nx">container</span> <span class="o">==</span> <span class="s1">&#39;&#39;</span><span class="p">)</span> </span><span id="L-171"><a name="L-171"></a> <span class="p">{</span> </span><span id="L-172"><a name="L-172"></a> <span class="nx">box</span><span class="p">.</span><span class="nx">cont</span> <span class="o">=</span> <span class="nx">box</span><span class="p">.</span><span class="nx">parent</span><span class="p">();</span> </span><span id="L-173"><a name="L-173"></a> <span class="p">}</span> </span><span id="L-174"><a name="L-174"></a> <span class="k">else</span> </span><span id="L-175"><a name="L-175"></a> <span class="p">{</span> </span><span id="L-176"><a name="L-176"></a> <span class="nx">box</span><span class="p">.</span><span class="nx">cont</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span> <span class="s1">&#39;#&#39;</span> <span class="o">+</span> <span class="nx">options</span><span class="p">.</span><span class="nx">container</span> <span class="p">);</span> </span><span id="L-177"><a name="L-177"></a> <span class="p">}</span> </span><span id="L-178"><a name="L-178"></a> </span><span id="L-179"><a name="L-179"></a> <span class="c1">// Finds the default positioning of the box.</span> </span><span id="L-180"><a name="L-180"></a> <span class="nx">box</span><span class="p">.</span><span class="nx">initialOffsetTop</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span> <span class="nx">box</span><span class="p">.</span><span class="nx">offset</span><span class="p">().</span><span class="nx">top</span> <span class="p">);</span> </span><span id="L-181"><a name="L-181"></a> <span class="nx">box</span><span class="p">.</span><span class="nx">initialTop</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span> <span class="nx">box</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span> <span class="s1">&#39;top&#39;</span> <span class="p">)</span> <span class="p">)</span> <span class="o">||</span> <span class="mi">0</span><span class="p">;</span> </span><span id="L-182"><a name="L-182"></a> </span><span id="L-183"><a name="L-183"></a> <span class="c1">// Hack to fix different treatment of boxes positioned &#39;absolute&#39; and &#39;relative&#39;</span> </span><span id="L-184"><a name="L-184"></a> <span class="k">if</span> <span class="p">(</span> <span class="nx">box</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span> <span class="s1">&#39;position&#39;</span> <span class="p">)</span> <span class="o">==</span> <span class="s1">&#39;relative&#39;</span> <span class="p">)</span> </span><span id="L-185"><a name="L-185"></a> <span class="p">{</span> </span><span id="L-186"><a name="L-186"></a> <span class="nx">box</span><span class="p">.</span><span class="nx">paddingAdjustment</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span> <span class="nx">box</span><span class="p">.</span><span class="nx">cont</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span> <span class="s1">&#39;paddingTop&#39;</span> <span class="p">)</span> <span class="p">)</span> <span class="o">+</span> <span class="nb">parseInt</span><span class="p">(</span> <span class="nx">box</span><span class="p">.</span><span class="nx">cont</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span> <span class="s1">&#39;paddingBottom&#39;</span> <span class="p">)</span> <span class="p">);</span> </span><span id="L-187"><a name="L-187"></a> <span class="p">}</span> </span><span id="L-188"><a name="L-188"></a> <span class="k">else</span> </span><span id="L-189"><a name="L-189"></a> <span class="p">{</span> </span><span id="L-190"><a name="L-190"></a> <span class="nx">box</span><span class="p">.</span><span class="nx">paddingAdjustment</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> </span><span id="L-191"><a name="L-191"></a> <span class="p">}</span> </span><span id="L-192"><a name="L-192"></a> </span><span id="L-193"><a name="L-193"></a> <span class="c1">// Animate the box when the page is scrolled</span> </span><span id="L-194"><a name="L-194"></a> <span class="nx">$</span><span class="p">(</span> <span class="nb">window</span> <span class="p">).</span><span class="nx">scroll</span><span class="p">(</span> <span class="kd">function</span> <span class="p">()</span> </span><span id="L-195"><a name="L-195"></a> <span class="p">{</span> </span><span id="L-196"><a name="L-196"></a> <span class="c1">// Sets up the delay of the animation</span> </span><span id="L-197"><a name="L-197"></a> <span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">scrollFollow</span><span class="p">.</span><span class="nx">interval</span> <span class="o">=</span> <span class="nx">ani</span><span class="p">();</span> </span><span id="L-198"><a name="L-198"></a> </span><span id="L-199"><a name="L-199"></a> <span class="c1">// To check against right before setting the animation</span> </span><span id="L-200"><a name="L-200"></a> <span class="nx">box</span><span class="p">.</span><span class="nx">lastScroll</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">getTime</span><span class="p">();</span> </span><span id="L-201"><a name="L-201"></a> <span class="p">}</span> </span><span id="L-202"><a name="L-202"></a> <span class="p">);</span> </span><span id="L-203"><a name="L-203"></a> </span><span id="L-204"><a name="L-204"></a> <span class="c1">// Animate the box when the page is resized</span> </span><span id="L-205"><a name="L-205"></a> <span class="nx">$</span><span class="p">(</span> <span class="nb">window</span> <span class="p">).</span><span class="nx">resize</span><span class="p">(</span> <span class="kd">function</span> <span class="p">()</span> </span><span id="L-206"><a name="L-206"></a> <span class="p">{</span> </span><span id="L-207"><a name="L-207"></a> <span class="c1">// Sets up the delay of the animation</span> </span><span id="L-208"><a name="L-208"></a> <span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">scrollFollow</span><span class="p">.</span><span class="nx">interval</span> <span class="o">=</span> <span class="nx">ani</span><span class="p">();</span> </span><span id="L-209"><a name="L-209"></a> </span><span id="L-210"><a name="L-210"></a> <span class="c1">// To check against right before setting the animation</span> </span><span id="L-211"><a name="L-211"></a> <span class="nx">box</span><span class="p">.</span><span class="nx">lastScroll</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">getTime</span><span class="p">();</span> </span><span id="L-212"><a name="L-212"></a> <span class="p">}</span> </span><span id="L-213"><a name="L-213"></a> <span class="p">);</span> </span><span id="L-214"><a name="L-214"></a> </span><span id="L-215"><a name="L-215"></a> <span class="c1">// Run an initial animation on page load</span> </span><span id="L-216"><a name="L-216"></a> <span class="nx">box</span><span class="p">.</span><span class="nx">lastScroll</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> </span><span id="L-217"><a name="L-217"></a> </span><span id="L-218"><a name="L-218"></a> <span class="nx">ani</span><span class="p">();</span> </span><span id="L-219"><a name="L-219"></a> <span class="p">};</span> </span><span id="L-220"><a name="L-220"></a> </span><span id="L-221"><a name="L-221"></a> <span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">scrollFollow</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span> <span class="nx">options</span> <span class="p">)</span> </span><span id="L-222"><a name="L-222"></a> <span class="p">{</span> </span><span id="L-223"><a name="L-223"></a> <span class="nx">options</span> <span class="o">=</span> <span class="nx">options</span> <span class="o">||</span> <span class="p">{};</span> </span><span id="L-224"><a name="L-224"></a> <span class="nx">options</span><span class="p">.</span><span class="nx">relativeTo</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">relativeTo</span> <span class="o">||</span> <span class="s1">&#39;top&#39;</span><span class="p">;</span> </span><span id="L-225"><a name="L-225"></a> <span class="nx">options</span><span class="p">.</span><span class="nx">speed</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">speed</span> <span class="o">||</span> <span class="mi">500</span><span class="p">;</span> </span><span id="L-226"><a name="L-226"></a> <span class="nx">options</span><span class="p">.</span><span class="nx">offset</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">offset</span> <span class="o">||</span> <span class="mi">0</span><span class="p">;</span> </span><span id="L-227"><a name="L-227"></a> <span class="nx">options</span><span class="p">.</span><span class="nx">easing</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">easing</span> <span class="o">||</span> <span class="s1">&#39;swing&#39;</span><span class="p">;</span> </span><span id="L-228"><a name="L-228"></a> <span class="nx">options</span><span class="p">.</span><span class="nx">container</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">container</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">parent</span><span class="p">().</span><span class="nx">attr</span><span class="p">(</span> <span class="s1">&#39;id&#39;</span> <span class="p">);</span> </span><span id="L-229"><a name="L-229"></a> <span class="nx">options</span><span class="p">.</span><span class="nx">killSwitch</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">killSwitch</span> <span class="o">||</span> <span class="s1">&#39;killSwitch&#39;</span><span class="p">;</span> </span><span id="L-230"><a name="L-230"></a> <span class="nx">options</span><span class="p">.</span><span class="nx">onText</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">onText</span> <span class="o">||</span> <span class="s1">&#39;Turn Slide Off&#39;</span><span class="p">;</span> </span><span id="L-231"><a name="L-231"></a> <span class="nx">options</span><span class="p">.</span><span class="nx">offText</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">offText</span> <span class="o">||</span> <span class="s1">&#39;Turn Slide On&#39;</span><span class="p">;</span> </span><span id="L-232"><a name="L-232"></a> <span class="nx">options</span><span class="p">.</span><span class="nx">delay</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">delay</span> <span class="o">||</span> <span class="mi">0</span><span class="p">;</span> </span><span id="L-233"><a name="L-233"></a> </span><span id="L-234"><a name="L-234"></a> <span class="k">this</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span> <span class="kd">function</span><span class="p">()</span> </span><span id="L-235"><a name="L-235"></a> <span class="p">{</span> </span><span id="L-236"><a name="L-236"></a> <span class="k">new</span> <span class="nx">$</span><span class="p">.</span><span class="nx">scrollFollow</span><span class="p">(</span> <span class="k">this</span><span class="p">,</span> <span class="nx">options</span> <span class="p">);</span> </span><span id="L-237"><a name="L-237"></a> <span class="p">}</span> </span><span id="L-238"><a name="L-238"></a> <span class="p">);</span> </span><span id="L-239"><a name="L-239"></a> </span><span id="L-240"><a name="L-240"></a> <span class="k">return</span> <span class="k">this</span><span class="p">;</span> </span><span id="L-241"><a name="L-241"></a> <span class="p">};</span> </span><span id="L-242"><a name="L-242"></a><span class="p">})(</span> <span class="nx">jQuery</span> <span class="p">);</span> </span></pre></div> </td></tr></table>
javascript, jquery, scrolling