1.Introduction:这个控件能够实现的效果是当你的页面滚动时,某个DIV永远停留在你需要它停留的位置。同时可以为这个DIV设定个容器,当滚动条已经超过了这个容器,那么这个DIV就不再滚动了。
有时候如果需要做个比较好用的导航条,使用这个控件挺不错的。
2.Code&Properties:这个js文件是在jQuery和jQueryUI的核心上扩展的。所以使用它前你必须到jQuery的官网下载那两个js文件,jquery.js和ui.core.js。整个javascript如下:
(function($){$.scrollFollow=function(box,options){//ConvertboxintoajQueryobjectbox=$(box);//'box'istheobjecttobeanimatedvarposition=box.css('position');functionani(){//Thescriptrunsoneveryscrollwhichreallymeansmanytimesduringascroll.//Wedon'twantmultipleslidestoqueueup.box.queue([]);//AbunchofvaluesweneedtodeterminewheretoanimatetovarviewportHeight=parseInt($(window).height());varpageScroll=parseInt($(document).scrollTop());varparentTop=parseInt(box.cont.offset().top);varparentHeight=parseInt(box.cont.attr('offsetHeight'));varboxHeight=parseInt(box.attr('offsetHeight')+(parseInt(box.css('marginTop'))||0)+(parseInt(box.css('marginBottom'))||0));varaniTop;//Makesuretheuserwantstheanimationtohappenif(isActive){//Iftheboxshouldanimaterelativetothetopofthewindowif(options.relativeTo=='top'){//Don'tanimateuntilthetopofthewindowiscloseenoughtothetopoftheboxif(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));}}//Iftheboxshouldanimaterelativetothebottomofthewindowelseif(options.relativeTo=='bottom'){//Don'tanimateuntilthebottomofthewindowiscloseenoughtothebottomoftheboxif((box.initialOffsetTop+boxHeight)>=(pageScroll+options.offset+viewportHeight)){aniTop=box.initialTop;}else{aniTop=Math.min((pageScroll+viewportHeight-boxHeight-options.offset),(parentHeight-boxHeight));}}//Checkstoseeiftherelevantscrollwasthelastone//"-20"istoaccountforinaccuracyinthetimeoutif((newDate().getTime()-box.lastScroll)>=(options.delay-20)){box.animate({top:aniTop},options.speed,options.easing);}}};//Foruser-initiatedstoppingoftheslidevarisActive=true;if($.cookie!=undefined){if($.cookie('scrollFollowSetting'+box.attr('id'))=='false'){varisActive=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();});}}//IfnoparentIDwasspecified,andtheimmediateparentdoesnothaveanID//options.containerwillbeundefined.Soweneedtofigureouttheparentelement.if(options.container==''){box.cont=box.parent();}else{box.cont=$('#'+options.container);}//Findsthedefaultpositioningofthebox.box.initialOffsetTop=parseInt(box.offset().top);box.initialTop=parseInt(box.css('top'))||0;//Hacktofixdifferenttreatmentofboxespositioned'absolute'and'relative'if(box.css('position')=='relative'){box.paddingAdjustment=parseInt(box.cont.css('paddingTop'))+parseInt(box.cont.css('paddingBottom'));}else{box.paddingAdjustment=0;}//Animatetheboxwhenthepageisscrolled$(window).scroll(function(){//Setsupthedelayoftheanimation$.fn.scrollFollow.interval=setTimeout(function(){ani();},options.delay);//Tocheckagainstrightbeforesettingtheanimationbox.lastScroll=newDate().getTime();});//Animatetheboxwhenthepageisresized$(window).resize(function(){//Setsupthedelayoftheanimation$.fn.scrollFollow.interval=setTimeout(function(){ani();},options.delay);//Tocheckagainstrightbeforesettingtheanimationbox.lastScroll=newDate().getTime();});//Runaninitialanimationonpageloadbox.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||'TurnSlideOff';options.offText=options.offText||'TurnSlideOn';options.delay=options.delay||0;this.each(function(){new$.scrollFollow(this,options);});returnthis;};})(jQuery);
这里面有几个参数可以设置效果:上面图示是用来设定这个DIV在滚动后的位置会在哪里。而所有的动画效果参数设置如下:
那么如何在HTML或者是其它的页面中使用呢?
<scripttype="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:1pxsolid#42CBDC;}
评论