简单代码实现智能侧边栏跟随固定浮动的效果

久伴 2018年8月9日10:41:37 9 692

很多网站博客都喜欢用“侧栏跟随”的效果,也就是随着滚动条的滚动,而跟着滑动或者固定的效果;感觉非常的人性化,一来可以弥补当一个页面很长,但侧边栏太短的时候的空白,二来可以合理利用空间展示更多信息,可以大大的提高网站浏览量、文章点击率、广告点击量。这样子的效果很适合于文章的列表(比如月度排行、热门文章之类的),还有适合于广告联盟的展示。

关于“WordPress 侧边栏跟随固定浮动效果”,网上一搜一大把,可真正能实现的没有几个,再加上教程写的都不那么完整详细,大家操作过程中就会遇到这样那样的问题,如:侧边栏遮挡底部 footer、侧边栏会顶着页脚 footer 无限滚下去等等,苦不堪言,百试而得不到解决,最后无奈放弃。

简单代码实现智能侧边栏跟随固定浮动的效果

提示

PS:对上面的删除线的解释,由于与我的“隐藏/显示侧边栏”相冲突,具体表现为:当侧边栏比主内容(#main-wrap-left)长,滚轮向上滚动时,点击“隐藏/显示侧边栏”按钮会导致模块错位,所以取消了主内容的滑动跟随(当然,如果贵站没有“隐藏/显示侧边栏”这样的功能,可以对主内容启用这个滑动跟随功能!),只启用侧边栏的滑动跟随效果.....希望有大神能告知解决方法!

一直想实现这样的效果,但无奈一直不知道怎么具体操作,无意中进了这个github页面,找到了方法:Theia Sticky Sidebar,万分感谢此作者!

怎么实现“智能侧边栏跟随固定浮动的效果“的方法步骤分享给大家,非常简单的步骤!觉得喜欢或有帮助,就顶一顶哈!

注意

友情提示:此方法不局限于 wordpress 中使用,也不局限于侧边栏!

首先,你的 HTML 结构应是这样:

<div class="wrapper">
  <div class="content">
    ...
  </div>
  <div class="sidebar">
    ...
  </div>
</div>

其中,sidebar是想要智能滑动的元素然后,引入 js:

<script type="text/javascript" src="https://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>

其中,第一个 js,大多数主题已经带有了,可以不引入!第二个 theia-sticky-sidebar.js,可以去这里下载;第三个 js 中的.sidebar跟上面的对应,就是想要智能滑动的元素对应的选择器,class 或 id。

可用配置参数及说明:

containerSelector:侧边栏的父容器元素。如果没有指定直接使用侧边栏的父元素。

additionalMarginTop:可选值。指定侧边栏的顶部 margin 值,单位像素,默认为 0 像素。

additionalMarginBottom:可选值。指定侧边栏的底部 margin 值,单位像素,默认为 0 像素。

updateSidebarHeight:是否更新侧边栏的高度。默认为 true。

minWidth:如果侧边栏的宽度小于这个值,将恢复为正常尺寸。默认值为 0。(该选项用于响应式设计)

defaultPosition:侧边栏必须是非 static 的定位方式。默认为 relative 定位方式。

namespace:绑定事件的命名空间。默认为 TSS。

最后,好吧,没有下一步了,至此已经实现了部署。如果你也喜欢这样的侧边栏浮动效果的话,那就不要犹豫赶紧折腾吧,祝成功!

久伴

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:9   其中:访客  5   博主  4

    • avatar 叙旧 2

      基本上都是带了这个功能,不过,折腾还是wp的主题嘛

        • 久伴 久伴 Admin

          @叙旧 嗯,是的

        • avatar typecho模板 2

          好复杂,不知道emlog上怎么用

            • 久伴 久伴 Admin

              @typecho模板 我的群里有人知道,你可以加群 :grin:

              • 久伴 久伴 Admin

                @typecho模板 没看到加群申请,你啥时候加的

                  • avatar typecho模板 2

                    @久伴 昨天,我昵称不是网站名称,保持神秘感 :grin:

                  • 久伴 久伴 Admin

                    @typecho模板 我丢,玩神秘的一般都是大佬(●—●)

                  • avatar nice 4

                    大佬这个用了会在顶着页脚无需滚动呀。。