我正在使用Jquery Scroll Follow插件，当用户向下滚动网站时，允许一个框跟随。 Scroll Follow允许用户禁用或启用滚动功能，并使用cookie插件记住用户跨页面的选择。
Scroll Follow效果很好，但代码可以在用户首次访问网站时立即滚动。我希望在用户首次进入网站时禁用默认设置，从而为用户提供启用滚动功能的选项。
我尝试过使用Cookie的true / false设置，但我无法正常使用它。我包含下面的代码，并感谢任何帮助将默认值更改为无滚动。
我尝试过在开发者网站上寻求帮助，但没有收到任何回复： 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 :(得分：0)
我在scrollFollow.js中为默认设置添加了另一个标志，在页面上调用了我的scrollFollow函数我添加了另一个名为defaultText的选项（属性）
var firstSetting = true;
if (firstSetting) {
isActive = false;
$('#' + options.killSwitch).html(options.defaultText);
firstSetting = false;
}
它为我工作
答案 1 :(得分：0)
抱歉，忘了这篇文章。我尝试使用cookie的排序，并认为我找到了一个可行的解决方案。似乎至少对我有用。希望这可以帮助任何人。下载并与原始版本进行比较。
( 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.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;
};