北极寒流 » 网络资源 » wordpress侧边栏随页面滚动完美版 - 2012.12.16

wordpress侧边栏随页面滚动完美版

其实关于wordpress侧边栏随页面滚动的代码,本站已经收集了几篇,但是以前的代码都不支持侧边栏滚动时到一定位置停止(有时候我们不希望侧边栏出现无限滚动的情况,所以才会有滑动到一定位置时希望它停止的要求),今天无意间在一网站上看见可以达到这一要求的代码。

效果说明:当指定内容块的顶部接触浏览器上部边框时,这个内容块将固定不动。
当内容块的底部与下方的DIV达到指定距离时,内容块开始随整体向上滚动。从而不会覆盖掉下方的内容。

第一步,既然是jquery插件,当然要在<head></head>里加上下面的代码,如果你已经挂载过JQ,则可以省略此步。

<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>

第二步,在侧边栏合适位置添加这段插件代码。

<!-- 侧边栏滚动-->
 <script type="text/javascript">
$(document).ready(function(){
	$(".post_content a[href='"+window.location.href+"']").addClass("selflink")
	$('.selflink').click(function() {return false;});
	$.fn.scrollFollow=function(options){options=options||{};options.container=options.container||$(this).parent();options.bottomObj=options.bottomObj||'';options.bottomMargin=options.bottomMargin||0;options.marginTop=options.marginTop||0;options.marginBottom=options.marginBottom||0;$window=$(window),$scrollObj=$(this);if($scrollObj.length<=0){return}scrollObj_Top=$scrollObj.position().top,scrollObj_Container_Height=options.container.height(),scrollObj_Position=$scrollObj.css("position");if(options.bottomObj==''||$(options.bottomObj).length<=0){is_bottomObj_exists=false}else{is_bottomObj_exists=true}$window.scroll(function(event){var new_scrollObj_Container_Height=options.container.height();var scrollObj_Height=$scrollObj.height();if(scrollObj_Container_Height!=new_scrollObj_Container_Height&&scrollObj_Container_Height<new_scrollObj_Container_Height+scrollObj_Height){scrollObj_Top=$scrollObj.position().top;scrollObj_Container_Height=new_scrollObj_Container_Height}scrollTop=$window.scrollTop(),topPosition=Math.max(0,scrollObj_Top-scrollTop);if(is_bottomObj_exists==true){var bottomObj_Top=$(options.bottomObj).position().top-options.marginBottom-options.marginTop;topPosition=Math.min(topPosition,(bottomObj_Top-scrollTop)-scrollObj_Height)}if(scrollTop>scrollObj_Top){if(is_bottomObj_exists==true&&(scrollObj_Top+scrollObj_Height>bottomObj_Top)){$scrollObj.css({position:scrollObj_Position,top:scrollObj_Top})}else{if(window.XMLHttpRequest){$scrollObj.css({position:"fixed",top:topPosition+options.marginTop})}else{$scrollObj.css({position:"absolute",top:scrollTop+topPosition+options.marginTop+'px'})}}}else{$scrollObj.css({position:scrollObj_Position,top:scrollObj_Top})}})};

	$("#float").scrollFollow({
		bottomObj: '.foot',
		marginTop:0,
		marginBottom:17
	});
});
 </script>
<!-- 侧边栏滚动-->

第三步,注意代码中的两个标签(红色位置)。给右侧需要浮动定位的DIV加上(id=“float”)。再给下方不想覆盖住的DIV加上(class=“foot”)。如此便大功告成了!

资料来源:http://www.jingucn.com/221/

16

wordpress侧边栏随页面滚动完美版

分享到: