A-A+

wordpress侧边栏停留在视野内的方法

2012年11月05日 综合技术 暂无评论 阅读 3,565 次

今天终于实现了这个早就想实现的效果,由于左侧文章内容可能会比较长,当浏览左侧的时候,右边的侧栏就消失了,显示为空白,所以就想让侧栏一直停留在视野内,可惜javascript我不会啊,今天终于找到了,哈哈,快把网页拉到底看看效果吧!

源码在这里,需要的自行修改。

可能会修改下面的紫色部分才能达到效果。

// 边侧栏广告跟随滚动
var $ad_widget = $('#text-16'),$ad_top = $ad_widget.offset().top,$ad_left = $ad_widget.offset().left,$ad_width = $ad_widget.width(),
$sidebar = $('#sidebar'),$sidebar_bottom = $sidebar.offset().top + $sidebar.height();
$(window).scroll(function (){
if($content_bottom <= $sidebar_bottom){
if($(window).scrollTop() < ($content_bottom - 40)){
$relate.css({'position':'static','top':$relate_top + 'px','left':$relate_left + 'px'});
}else{
var $relate_now_top = $relate.offset().top;
if($relate_now_top == $relate_top)$relate.hide().fadeIn('slow');
$relate.css({
'position':'fixed','top':'40px','left':$relate_left,
'_position':'absolute','_top':'expression(documentElement.scrollTop + 40)',
width:$relate_width
});
}
return false;
}
}).scroll();

给我留言