zblogphp主题侧边栏添加悬浮效果的方法《博客模板[自适应]》主题HTML5模版(ydmm)模版SEO优化记录
这篇文章是继《zblogphp《博客模板[自适应]》主题HTML5模版(ydmm)模版SEO修改记录》后的续篇。
很多网站博客都喜欢用“侧栏跟随”的效果，也就是随着滚动条的滚动，而跟着滑动或者固定的效果；感觉非常的人性化，一来可以弥补当一个页面很长，但侧边栏太短的时候的空白，二来可以合理利用空间展示更多信息，可以大大的提高网站浏览量、文章点击率、广告点击量。这样子的效果很适合于文章的列表（比如月度排行、热门文章之类的），还有适合于广告联盟的展示。
今天就说下在zblog主题YDMM上添加右侧悬浮效果的方法，效果可以看下本站的效果。
首先在CSS里面添加
.moveside {
position:fixed;
top:0;
margin-top:45px;
这里的.moveside跟下面的DIV对应，就是想要智能滑动的元素对应的选择器id，可以自己添加效果自己修改。由于这里YDMM主题往下滚动的时候顶部会有导航条宽度是45，所以添加了一个margin-top:45px;
然后在右侧栏底部位置添加
<div id="moveside">这里是一些代码</div>//这里的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")
}
}
})
});
到这里就可以实现右侧悬浮的效果了。
本站附件分享，如果附件失效，可以去找找看
