INEWUP'S BLOG

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

今天终于实现了这个早就想实现的效果,由于左侧文章内容可能会比较长,当浏览左侧的时候,右边的侧栏就消失了,显示为空白,所以就想让侧栏一直停留在视野内,可惜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();