JQuery实现的页面滚动时浮动窗口控件

想要天天向上，就要懂得享受学习。为大家推荐JQuery 实现的页面滚动时浮动窗口控件，精彩的内容需要你们用心的阅读。还在等什么快点来看看吧！

1. Introduction:

这个控件能够实现的效果是当你的页面滚动时,某个DIV永远停留在你需要它停留的位置。同时可以为这个DIV设定个容器,当滚动条已经超过了这个容器,那么这个DIV就不再滚动了。

有时候如果需要做个比较好用的导航条,使用这个控件挺不错的。

2. Code & Properties:

这个js文件是在jQuery和JQeuryUI的核心上扩展的。所以使用它前你必须到JQuery的官网下载那两个js文件,和。

整个javascript如下:

代码如下:

( function( $ ) {

$.scrollFollow = function ( box, options )

{

// Convert box into a jQuery object

box = $( box );

// ox 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 want multiple slides to queue up.

( [ ] );

// 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( () );

var parentHeight = parseInt( ( offsetHeight ) );

var boxHeight = parseInt( ( 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 ( == op )

{

// Don animate until the top of the window is close enough to the top of the box

if ( = ( pageScroll + ) )

{

aniTop = ;

}

else

{

aniTop = Math.min( ( Math.max( ( -parentTop ), ( pageScroll - + ) ) + ), ( parentHeight - boxHeight - ) );

}

}

// If the box should animate relative to the bottom of the window

else if ( == ottom )

{

// Don animate until the bottom of the window is close enough to the bottom of the box

if ( ( + boxHeight ) = ( pageScroll + + viewportHeight ) )

{

aniTop = ;

}

else

{

aniTop = Math.min( ( pageScroll + viewportHeight - boxHeight - ), ( 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() - ) = ( - 20 ) )

{

(

{

top: aniTop

}, ,

);

}

}

};

// For user-initiated stopping of the slide

var isActive = true;

if ( $.cookie != undefined )

{

if( $.cookie( scrollFollowSetting + ( id ) ) == false )

{

var isActive = false;

$( # + ).text( )

.toggle(

function ()

{

isActive = true;

$( this ).text( );

$.cookie( scrollFollowSetting + ( id ), true, { expires: 365, path: /} );

ani();

},

function ()

{

isActive = false;

$( this ).text( );

(

{

top:

}, ,

);

$.cookie( scrollFollowSetting + ( id ), false, { expires: 365, path: /} );

}

);

}

else

{

$( # + ).text( )

.toggle(

function ()

{

isActive = false;

$( this ).text( );

(

{

top:

}, 0

);

$.cookie( scrollFollowSetting + ( id ), false, { expires: 365, path: /} );

},

function ()

{

isActive = true;

$( this ).text( );

$.cookie( scrollFollowSetting + ( id ), true, { expires: 365, path: /} );

ani();

}

);

}

}

// If no parent ID was specified, and the immediate parent does not have an ID

// will be undefined. So we need to figure out the parent element.

if ( == \)

{

= ();

}

else

{

= $( # + );

}

// Finds the default positioning of the box.

= parseInt( () );

= parseInt( box.css( op ) ) || 0;

// Hack to fix different treatment of boxes positioned absolute and elative

if ( box.css( position ) == elative )

{

= parseInt( .css( paddingTop ) ) + parseInt( .css( paddingBottom ) );

}

else

{

= 0;

}

// Animate the box when the page is scrolled

$( window ).scroll( function ()

{

// Sets up the delay of the animation

$. = setTimeout( function(){ ani();} , );

// To check against right before setting the animation

= new Date().getTime();

}

);

// Animate the box when the page is resized

$( window ).resize( function ()

{

// Sets up the delay of the animation

$. = setTimeout( function(){ ani();} , );

// To check against right before setting the animation

= new Date().getTime();

}

);

// Run an initial animation on page load

= 0;

ani();

};

$. = function ( options )

{

options = options || {};

= || op;

= || 1;

= || 0;

= || swing;

= || ()( id );

= || killSwitch;

= || Turn Slide Off;

= || Turn Slide On;

= || 0;

( function()

{

new $.scrollFollow( this, options );

}

);

return this;

};

})( jQuery );

这里面有几个参数可以设置效果:

上面图示是用来设定这个DIV在滚动后的位置会在哪里。

而所有的动画效果参数设置如下:

那么如何在HTML或者是其它的页面中使用呢？

代码如下:

script type="text/javascript"!--

$( document ).ready( function ()

{

$( #example ).scrollFollow();

}

);

// --/script

最后是设置ID为example这个DIV的Css样式,需要注意的是position必须设定为relative,如下例:

代码如下:

#example {

position: relative;

width: 220px;

margin: 5px;

padding: 10px;

background: #DDDDDD;

border: 1px solid #42CBDC;

}