Advertisement
stephandesouza

scrollFollow jquery 1.6 Fixed

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