一直以来都觉得博客里有个漂浮的侧边栏是件很酷的事,但是一直以来都是很懒懒到稍微做点改动都不想。昨天晚上终于实在无聊开始下决心对博客作了小小的改动。改了字体的大小,增加了二级导航菜单,添加了版权信息,最后就是添加了侧边栏漂浮。没有漂浮的侧边栏的博客不是完整的博客~今天我就来讲解一下,包教包会~
插件法
Strx Magic Floating Sidebar Maker插件可以满足你的要求还可以设置速度,最主要的是填写下侧边栏的ID。怎么看ID?用Chrome的F12或者火狐的开发人员工具就可以了,下面的侧边栏的div那里的ID就是你要填的东西。
代码法
<scripttype="text/javascript"> vardocumentHeight = 0; vartopPadding = 15; $(function() { varoffset = $("#sidebar").offset(); documentHeight = $(document).height(); $(window).scroll(function() { varsideBarHeight = $("#sidebar").height(); if ($(window).scrollTop() > offset.top) { varnewPosition = ($(window).scrollTop() - offset.top) + topPadding; varmaxPosition = 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出现啦。
还是不会?欢迎在下面留言,我会尽快回答的~说过了包教包会!