当前位置:首页 > 建站工具 > 站长工具

jQuery插件Theia Sticky Sidebar侧边栏跟随浏览器滚动

懒鸟飞 发布于

这个功能现在应用的非常普遍,如果页面比较高,当滚动条拖到页面的下面的时候,侧边栏会跟随浏览器固定显示。使用theiaStickySidebar插件就能够实现。

插件介绍
theia-sticky-sidebar.js是一款jquery滚动固定侧边栏插件。该jquery滚动固定侧边栏插件在页面向下滚动时,可以将左侧或右侧侧边栏固定在页面中。它特别适合于多列布局的页面,并能和bootstrap或Foundation配合使用。

功能实现
1、首先先来看下 Html 页面结构:
    <!— 侧边栏 —>
    <div id='right'><p>推荐文章</p></div>

2、首先我们需要引入JQuery,然后再引入theiaStickySidebar插件。

    <script type="text/javascript" src="theia-sticky-sidebar.min.js"></script>
    <script type="text/javascript">
      jQuery(document).ready(function() {
        jQuery('#right').theiaStickySidebar({
          // Settings 距离浏览器顶部10px
          additionalMarginTop: 10
        });
      });
    </script>

这样就已经完美实现,侧边栏跟随浏览期滚动,固定位置了。theiaStickySidebar插件地址:https://github.com/WeCodePixels/theia-sticky-sidebar

下载地址:https://pan.baidu.com/s/1l_-rYMNlG_9Fj0O1YReKMw
提取密码:0f3e