这个功能以前访问一些博客就见过,本来以为是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)
除特别注明外,本站所有文章均为LJY IT BLOG原创,转载请注明出处来自https://www.ljy2345.com/2019/02/wordpress-blog-sidebar-realizes-top-fixed-floating-follow/
Comments | NOTHING