JQuery 實(shí)現(xiàn)的頁(yè)面滾動(dòng)時(shí)浮動(dòng)窗口控件
更新時(shí)間：2009年07月10日 21:34:48 作者：
JQuery 實(shí)現(xiàn)的頁(yè)面滾動(dòng)時(shí)浮動(dòng)窗口控件實(shí)現(xiàn)代碼，大家可以參考下。
1. Introduction:
這個(gè)控件能夠?qū)崿F(xiàn)的效果是當(dāng)你的頁(yè)面滾動(dòng)時(shí),某個(gè)DIV永遠(yuǎn)停留在你需要它停留的位置。同時(shí)可以為這個(gè)DIV設(shè)定個(gè)容器,當(dāng)滾動(dòng)條已經(jīng)超過了這個(gè)容器,那么這個(gè)DIV就不再滾動(dòng)了。
有時(shí)候如果需要做個(gè)比較好用的導(dǎo)航條,使用這個(gè)控件挺不錯(cuò)的。
2. Code & Properties:
這個(gè)js文件是在jQuery和JQeury UI的核心上擴(kuò)展的。所以使用它前你必須到JQuery的官網(wǎng)下載那兩個(gè)js文件,jquery.js和ui.core.js。
整個(gè)javascript如下:
復(fù)制代碼 代碼如下:
( 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 );
這里面有幾個(gè)參數(shù)可以設(shè)置效果:
上面圖示是用來(lái)設(shè)定這個(gè)DIV在滾動(dòng)后的位置會(huì)在哪里。
而所有的動(dòng)畫效果參數(shù)設(shè)置如下:
那么如何在HTML或者是其它的頁(yè)面中使用呢?
復(fù)制代碼 代碼如下:
<script type="text/javascript"><!--
$( document ).ready( function ()
{
$( '#example' ).scrollFollow();
}
);
// --></script>
最后是設(shè)置ID為example這個(gè)DIV的Css樣式,需要注意的是position必須設(shè)定為relative,如下例:
復(fù)制代碼 代碼如下:
#example {
position: relative;
width: 220px;
margin: 5px;
padding: 10px;
background: #DDDDDD;
border: 1px solid #42CBDC;
}
您可能感興趣的文章:
- 利用jquery禁止外層滾動(dòng)條的滾動(dòng)
- jQuery創(chuàng)建平滑的頁(yè)面滾動(dòng)(頂部或底部)
- 基于Jquery的文字滾動(dòng)跑馬燈插件(一個(gè)頁(yè)面多個(gè)滾動(dòng)區(qū))
- js，jquery滾動(dòng)/跳轉(zhuǎn)頁(yè)面到指定位置的實(shí)現(xiàn)思路
- JS和JQUERY獲取頁(yè)面大小,滾動(dòng)條位置,元素位置(示例代碼)
- 基于JQuery實(shí)現(xiàn)滾動(dòng)到頁(yè)面底端時(shí)自動(dòng)加載更多信息
- 淺談jQuery頁(yè)面的滾動(dòng)位置scrollTop、scrollLeft
- jQuery實(shí)現(xiàn)div浮動(dòng)層跟隨頁(yè)面滾動(dòng)效果
- jquery 頁(yè)面滾動(dòng)到底部自動(dòng)加載插件集合
- jQuery阻止移動(dòng)端遮罩層后頁(yè)面滾動(dòng)
相關(guān)文章
這篇文章主要介紹了JQuery事件冒泡和默認(rèn)行為代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
jquery簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)層的展開與收縮效果
這篇文章主要介紹了jquery簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)層的展開與收縮效果的方法,涉及jquery中toggle結(jié)合animate方法操作頁(yè)面元素屬性的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08
本文給大家分享的是一段使用jQuery實(shí)現(xiàn)的多按鈕單擊之后變色的代碼，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。2014-11-11
jQuery Datatable 多個(gè)查詢條件自定義提交事件(推薦)
這篇文章主要介紹了jQuery Datatable 多個(gè)查詢條件自定義提交事件的相關(guān)資料,需要的朋友可以參考下2017-08-08
一次$.getJSON不執(zhí)行的簡(jiǎn)單記錄
下面小編就為大家?guī)?lái)一篇一次$.getJSON不執(zhí)行的簡(jiǎn)單記錄。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-07-07
jQuery1.6 使用方法1，想要學(xué)習(xí)jquery的朋友可以參考下。2011-11-11
詳談Ajax請(qǐng)求中的async:false/true的作用(ajax 在外部調(diào)用問題)
下面小編就為大家?guī)?lái)一篇詳談Ajax請(qǐng)求中的async:false/true的作用(ajax返回值在外部調(diào)用問題)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-02-02
這篇文章主要介紹了詳解jQuery中的元素的屬性和相關(guān)操作,jQuery是最為流行的JavaScript庫(kù),需要的朋友可以參考下2015-08-08
使用struts2+Ajax+jquery驗(yàn)證用戶名是否已被注冊(cè)
這篇文章主要介紹了使用struts2+Ajax+jquery驗(yàn)證用戶名是否已被注冊(cè)的相關(guān)資料,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了jQuery中each遍歷的三種方法,結(jié)合實(shí)例形式分析了jQuery使用each遍歷DOM元素的相關(guān)操作技巧,并附帶了一個(gè)綜合實(shí)例給予總結(jié)說明,需要的朋友可以參考下2018-09-09