WordPress博客侧栏实现顶部固定浮动跟随

gyue2345·2019-02-15·260 次阅读··

这个功能以前访问一些博客就见过，本来以为是tinectoin主题里面的浮动边栏小工具，后来试了。不是，上搜索引擎搜索了好久才找到一个类似的。 来自ilxtx.com：https://www.ilxtx.com/theia-sticky-sidebar.html

然后方法是：

<div id="sidebar" class="clr" >

找到sidebar的id，然后就调用下面的代码在底部

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<script type="text/javascript" src="theia-sticky-sidebar.js"></script>

<script type="text/javascript">

  jQuery(document).ready(function() {

    jQuery('.sidebar').theiaStickySidebar({

      // Settings

      additionalMarginTop: 30

    });

  });

</script>

或者这样。

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="dist/ResizeSensor.min.js"></script>
<script type="text/javascript" src="dist/theia-sticky-sidebar.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content, .sidebar').theiaStickySidebar({
// Settings
additionalMarginTop: 30
});
});
</script>

然后我就打开主页试试，怎么不行呢，原来，我发现那个sidebar，有个#。

然后我就把，.sidebar换成#sidebar就成功了

theia-sticky-sidebar.js，可以去这里下载；第三个 js 中的.sidebar跟上面的对应，就是想要智能滑动的元素对应的选择器，class 或 id。

可用配置参数及说明：

• containerSelector：侧边栏的父容器元素。如果没有指定直接使用侧边栏的父元素。
• additionalMarginTop：可选值。指定侧边栏的顶部 margin 值，单位像素，默认为 0 像素。
• additionalMarginBottom：可选值。指定侧边栏的底部 margin 值，单位像素，默认为 0 像素。
• updateSidebarHeight：是否更新侧边栏的高度。默认为 true。
• minWidth：如果侧边栏的宽度小于这个值，将恢复为正常尺寸。默认值为 0。（该选项用于响应式设计）
• defaultPosition：侧边栏必须是非 static 的定位方式。默认为 relative 定位方式。
• namespace：绑定事件的命名空间。默认为 TSS。

参考文章：

https://www.ilxtx.com/theia-sticky-sidebar.html

历史上的文章

• 2016:  WordPress判断PC和手机显示不同的内容( 0)
• 2015:  摄影( 0)
• 2015:  简单破解WEP/WPA/WPA2加密的WIFI密码，平台kali-linux( 1)
• 2015:  Tinection主题使用教程--小白教程( 0)
• 2015:  原创：WordPress添加彩色标签云( 0)