这个控件能够实现的效果是当你的页面滚动时,某个div永远停留在你需要它停留的位置。同时可以为这个div设定个容器,当滚动条已经超过了这个容器,那么这个div就不再滚动了。
有时候如果需要做个比较好用的导航条,使用这个控件挺不错的。
2. code & properties:
这个js文件是在jquery和jqeury ui的核心上扩展的。所以使用它前你必须到jquery的官网下载那两个js文件,jquery.js和ui.core.js。
整个javascript如下:
复制代码 代码如下:
( 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.animate(
{
top: anitop
}, options.speed, options.easing
);
}
}
};
// 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.animate(
{
top: box.initialtop
}, options.speed, options.easing
);
$.cookie( 'scrollfollowsetting' + box.attr( 'id' ), false, { expires: 365, path: '/'} );
}
);
}
else
{
$( '#' + options.killswitch ).text( options.ontext )
.toggle(
function ()
{
isactive = false;
$( this ).text( options.offtext );
box.animate(
{
top: box.initialtop
}, 0
);
$.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 = 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
$( window ).resize( function ()
{
// sets up the delay of the animation
$.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();
};
$.fn.scrollfollow = function ( options )
{
options = options || {};
options.relativeto = options.relativeto || 'top';
options.speed = options.speed || 1;
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 );
这里面有几个参数可以设置效果:
上面图示是用来设定这个div在滚动后的位置会在哪里。
而所有的动画效果参数设置如下:
那么如何在html或者是其它的页面中使用呢?
复制代码 代码如下:
最后是设置id为example这个div的css样式,需要注意的是position必须设定为relative,如下例:
复制代码 代码如下:
#example {
position: relative;
width: 220px;
margin: 5px;
padding: 10px;
background: #dddddd;
border: 1px solid #42cbdc;
}