首页 jQuery 侧边栏固定 theia-sticky-sidebar.js

jQuery 侧边栏固定 theia-sticky-sidebar.js

chenmo 2020-5-16 0 50

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

使用方法

在页面中引入jquery、ResizeSensor.min.js和theia-sticky-sidebar.min.js文件。

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

Theia Sticky Sidebar滚动固定侧边栏插件使用CSS Element Queries这个库来检测侧边栏高度的变化,以此来重新计算侧边栏的位置。ResizeSensor.js正是用来完成这个任务的。

你也可以不引入ResizeSensor.min.js文件,Theia Sticky Sidebar滚动固定侧边栏插件仍然会正常工作,但是不会自动检测侧边栏的高度。

 HTML结构

页面的HTML结构应该类似下面的样子:

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

内部的div.theiaStickySidebar是可选的,但是建议这样组织HTML结构。如果你不是这样组织的,插件会自动为你添加这样一个div。如果你的侧边栏放置有广告或iframe,那么你最好安装上面的HTML结构来组织HTML代码。

 配置参数

Theia Sticky Sidebar滚动固定侧边栏插件的可用配置参数有:

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

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

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

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

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

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

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

Theia Sticky Sidebar滚动固定侧边栏jquery插件的github地址为:https://github.com/WeCodePixels/theia-sticky-sidebar


#jQuery##侧边栏##theia-sticky-sidebar##滚动##固定#

免责声明:本文仅代表作者个人观点,与本网站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
作者: chenmo 本文最后编辑于2020-5-16 10:45:30
chenmo

一个爱玩电脑,却又不沉迷游戏;喜欢网页设计,却又能力不足。喜欢网上到处灌,关注科技类新闻,寻搜有价值的网站。喜欢美剧,又喜爱电影,可以很宅,很宅,却又爱好户外骑行运动,喜欢接近大自然的心声。

作者的微博

发表评论: