WordPress侧边栏漂浮的实现

最新推荐文章于 2022-09-02 01:28:22 发布

老张笔记

最新推荐文章于 2022-09-02 01:28:22 发布

阅读量2.3k

点赞数

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

插件法

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出现啦。

还是不会？欢迎在下面留言，我会尽快回答的～说过了包教包会！

文章来自：WordPress侧边栏漂浮的实现

老张笔记

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WordPress侧边栏漂浮的实现

一直以来都觉得博客里有个漂浮的侧边栏是件很酷的事，但是一直以来都是很懒懒到稍微做点改动都不想。昨天晚上终于实在无聊开始下决心对博客作了小小的改动。改了字体的大小，增加了二级导航菜单，添加了版权信息，最后就是添加了侧边栏漂浮。没有漂浮的侧边栏的博客不是完整的博客～今天我就来讲解一下，包教包会～插件法Strx Magic Floating Sidebar Maker插件可以满足你的要求还可以设
复制链接

扫一扫