2009-10-08 54 views
1

我正在使用Jquery Scroll Follow插件允许一个框随着用户向下滚动网站。 Scroll Follow允许用户禁用或启用滚动功能,并使用cookie插件记住用户在不同页面上的选择。使用Jquery Scroll跟随插件与Cookie插件

滚动跟随效果很好,但代码可以在用户第一次访问网站时立即滚动。我想在用户第一次进入网站时禁用默认设置,从而为用户提供启用滚动的选项。

我试着玩弄cookie的真/假设置,但我无法让它正常工作。我包含下面的代码,并感谢帮助将默认更改为不滚动。

我试过要求对开发人员的网站帮助,但没有得到任何回应: link text

感谢。

/** 
* 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(jQuery) { 

jQuery.scrollFollow = function (box, options) 
{ 
    // Convert box into a jQuery object 
    box = jQuery(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(jQuery(window).height()); 
     var pageScroll = parseInt(jQuery(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.animate(
        { 
         top: aniTop 
        }, options.speed, options.easing 
       ); 
      } 
     } 
    }; 

    // For user-initiated stopping of the slide 
    var isActive = true; 

    if (jQuery.cookie != undefined) 
    { 
     if(jQuery.cookie('scrollFollowSetting' + box.attr('id')) == 'false') 
     { 
      var isActive = false; 

      jQuery('#' + options.killSwitch).text(options.offText) 
       .toggle( 
        function() 
        { 
         isActive = true; 

         jQuery(this).text(options.onText); 

         jQuery.cookie('scrollFollowSetting' + box.attr('id'), true, { expires: 365, path: '/'}); 

         ani(); 
        }, 
        function() 
        { 
         isActive = false; 

         jQuery(this).text(options.offText); 

         box.animate(
          { 
           top: box.initialTop 
          }, options.speed, options.easing 
         ); 

         jQuery.cookie('scrollFollowSetting' + box.attr('id'), false, { expires: 365, path: '/'}); 
        } 
       ); 
     } 
     else 
     { 
      jQuery('#' + options.killSwitch).text(options.onText) 
       .toggle( 
        function() 
        { 
         isActive = false; 

         jQuery(this).text(options.offText); 

         box.animate(
          { 
           top: box.initialTop 
          }, 0 
         ); 

         jQuery.cookie('scrollFollowSetting' + box.attr('id'), false, { expires: 365, path: '/'}); 
        }, 
        function() 
        { 
         isActive = true; 

         jQuery(this).text(options.onText); 

         jQuery.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 = jQuery('#' + 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 
    jQuery(window).scroll(function() 
     { 
      // Sets up the delay of the animation 
      jQuery.fn.scrollFollow.interval = setTimeout(function(){ ani();} , options.delay); 

      // To check against right before setting the animation 
      box.lastScroll = new Date().getTime(); 
     } 
    ); 

    // Animate the box when the page is resized 
    jQuery(window).resize(function() 
     { 
      // Sets up the delay of the animation 
      jQuery.fn.scrollFollow.interval = setTimeout(function(){ ani();} , options.delay); 

      // To check against right before setting the animation 
      box.lastScroll = new Date().getTime(); 
     } 
    ); 

    // Run an initial animation on page load 
    box.lastScroll = 0; 

    ani(); 
}; 

jQuery.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 jQuery.scrollFollow(this, options); 
     } 
    ); 

    return this; 
}; 
})(jQuery); 

回答

0
工作

对不起,忘了这篇文章。我尝试着使用cookies的顺序,并认为我找到了一个可行的解决方案。似乎至少对我有用。希望这可以帮助任何人。下载并与原始比较。

(function(jQuery) {

jQuery.scrollFollow = function (box, options) 
{ 
    // Convert box into a jQuery object 
    box = jQuery(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(jQuery(window).height()); 
     var pageScroll = parseInt(jQuery(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.animate(
        { 
         top: aniTop 
        }, options.speed, options.easing 
       ); 
      } 
     } 
    }; 

    // For user-initiated stopping of the slide 
    var isActive = false; 

    if (jQuery.cookie != undefined) 
    { 
     if(jQuery.cookie('scrollFollowSetting' + box.attr('id')) == 'true') 
     { 
      var isActive = true; 

      jQuery('#' + options.killSwitch).text(options.onText) 
       .toggle( 
        function() 
        { 
         isActive = false; 

         jQuery(this).text(options.offText); 

         box.animate(
          { 
           top: box.initialTop 
          }, options.speed, options.easing 
         ); 

         jQuery.cookie('scrollFollowSetting' + box.attr('id'), false, { expires: 365, path: '/'}); 


        }, 
        function() 
        { 
         isActive = true; 

         jQuery(this).text(options.onText); 



         jQuery.cookie('scrollFollowSetting' + box.attr('id'), true, { expires: 365, path: '/'}); 
         ani(); 
        } 
       ); 
     } 
     else 
     { 
      jQuery('#' + options.killSwitch).text(options.offText) 
       .toggle( 
        function() 
        { 
         isActive = true; 

         jQuery(this).text(options.onText); 



         jQuery.cookie('scrollFollowSetting' + box.attr('id'), true, { expires: 365, path: '/'}); 
         ani(); 
        }, 
        function() 
        { 
         isActive = false; 

         jQuery(this).text(options.offText); 

         box.animate(
          { 
           top: box.initialTop 
          }, 0 
         ); 

         jQuery.cookie('scrollFollowSetting' + box.attr('id'), false, { expires: 365, path: '/'}); 


        } 
       ); 
     } 
    } 

    // 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 = jQuery('#' + 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 
    jQuery(window).scroll(function() 
     { 
      // Sets up the delay of the animation 
      jQuery.fn.scrollFollow.interval = setTimeout(function(){ ani();} , options.delay); 

      // To check against right before setting the animation 
      box.lastScroll = new Date().getTime(); 
     } 
    ); 

    // Animate the box when the page is resized 
    jQuery(window).resize(function() 
     { 
      // Sets up the delay of the animation 
      jQuery.fn.scrollFollow.interval = setTimeout(function(){ ani();} , options.delay); 

      // To check against right before setting the animation 
      box.lastScroll = new Date().getTime(); 
     } 
    ); 

    // Run an initial animation on page load 
    box.lastScroll = 0; 

    ani(); 
}; 

jQuery.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 jQuery.scrollFollow(this, options); 
     } 
    ); 

    return this; 
}; 

})(jQuery);

0

我添加了默认设置另一个标志scrollFollow.js和页面我scrollFollow函数调用上我添加了一个名为defaultText

var firstSetting = true; 

if (firstSetting) { 
    isActive = false; 
    $('#' + options.killSwitch).html(options.defaultText); 
    firstSetting = false; 
} 

它的另一种选择(属性)对我来说