WordPress侧边栏漂浮的实现

一直以来都觉得博客里有个漂浮的侧边栏是件很酷的事,但是一直以来都是很懒懒到稍微做点改动都不想。昨天晚上终于实在无聊开始下决心对博客作了小小的改动。改了字体的大小,增加了二级导航菜单,添加了版权信息,最后就是添加了侧边栏漂浮。没有漂浮的侧边栏的博客不是完整的博客~今天我就来讲解一下,包教包会~

插件法

Strx Magic Floating Sidebar Maker插件可以满足你的要求还可以设置速度,最主要的是填写下侧边栏的ID。怎么看ID?用Chrome的F12或者火狐的开发人员工具就可以了,下面的侧边栏的div那里的ID就是你要填的东西。

代码法

<script type="text/javascript">
var documentHeight = 0;
var topPadding = 15;
$(function() {
var offset = $("#sidebar").offset();
documentHeight = $(document).height();
$(window).scroll(function() {
var sideBarHeight = $("#sidebar").height();
if ($(window).scrollTop() > offset.top) {
var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
var maxPosition = documentHeight - (sideBarHeight + 368);
if (newPosition > maxPosition) {
newPosition = maxPosition;
}
$("#sidebar").stop().animate({
marginTop: newPosition
});
} else {
$("#sidebar").stop().animate({
marginTop: 0
});
};
});
});
</script>

把上面的代码复制到顶部文件header.php的<body>之后,然后把其中的元素ID换成边栏的ID就可以了,还是不会看ID?好吧我来上张图:


看吧,在Chrome中按下F12,在元素搜索栏里面输入边栏的名称,ID出现啦。

还是不会?欢迎在下面留言,我会尽快回答的~说过了包教包会!

2 thoughts on “WordPress侧边栏漂浮的实现

发表评论

电子邮件地址不会被公开。 必填项已用*标注