php 侧边栏效果,zblogphp主题侧边栏添加悬浮效果的方法《博客模板[自适应]》主题HTML5模版(ydmm)模版SEO优化记录...

很多网站博客都喜欢用“侧栏跟随”的效果，也就是随着滚动条的滚动，而跟着滑动或者固定的效果；感觉非常的人性化，一来可以弥补当一个页面很长，但侧边栏太短的时候的空白，二来可以合理利用空间展示更多信息，可以大大的提高网站浏览量、文章点击率、广告点击量。这样子的效果很适合于文章的列表(比如月度排行、热门文章之类的)，还有适合于广告联盟的展示。

今天就说下在ZBlog主题YDMM上添加右侧悬浮效果的方法，效果可以看下本站的效果。

首先在CSS里面添加

.moveside {

position:fixed;

top:0;

margin-top:45px;

这里的.moveside跟下面的DIV对应，就是想要智能滑动的元素对应的选择器id，可以自己添加效果自己修改。由于这里YDMM主题往下滚动的时候顶部会有导航条宽度是45，所以添加了一个margin-top:45px;

然后在右侧栏底部位置添加

这里是一些代码

//这里的id="moveside"和上面对应

注意最好在底部侧边栏底部添加，因为当页面滚动到此处的时候就会悬浮显示这个DIV，如果在中部添加DIV，就会出现覆盖下面侧边栏内容的情况。添加这个悬浮的目的主要是有些页面太长，侧边栏太短的时候的空白。

然后添加JS代码

$(function() {

var toTopHeight = $("#moveside").offset().top;

$(window).scroll(function() {

if ($(document).scrollTop() > toTopHeight) {

if ('undefined' == typeof(document.body.style.maxHeight)) {

var scrollTop = $(document).scrollTop();

$("#moveside").css({

'position': 'absolute',

'top': scrollTop + 'px'

})

} else {

$("#moveside").addClass("moveside")

}

} else {

if ('undefined' == typeof(document.body.style.maxHeight)) {

$("#moveside").css({

'position': 'absolute',

'top': toTopHeight + 'px'

})

} else {

$("#moveside").removeClass("moveside")

}

}

})

});

到这里就可以实现右侧悬浮的效果了。