我们新增Dark Mode(暗模式),(只是在晚上)可以改变MAC OS&Windows系统的暗模式实现切换;安卓和苹果手机是一样的。
编程代码

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

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

   2019-02-15 22:50 LJY2345    抢沙发   隐藏边栏   黑色模式    251 
   评分 2 次,平均分 4.0    抢沙发   隐藏边栏   黑色模式
[收起] 文章目录

这个功能以前访问一些博客就见过,本来以为是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,有个#。

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

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

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

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

赞赏

历史上的文章

除特别注明外,本站所有文章均为LJY IT BLOG原创,转载请注明出处来自https://www.ljy2345.com/2019/02/wordpress-blog-sidebar-realizes-top-fixed-floating-follow/

博 主作者: 关注:6    粉丝:1最后编辑于:2022年9月4日
LJY IT BLOG的站长。

扫一扫打赏

支付宝扫一扫打赏

微信扫一扫打赏

view comments - NOTHING
🌙
😃

切换注册
忘记密码 ?

×

您也可以使用第三方帐号快捷登录

切换登录

×
扫一扫二维码分享
下载海报
  切换主题 | SCHEME TOOL