fixSidebar

侧边栏固定小组件
授权协议 Apache
开发语言 JavaScript
所属分类 jQuery 插件、 jQuery高级页面组件
软件类型 开源软件
地区 国产
投 递 者 柏修洁
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

fixSidebar是一个侧边栏固定小组件,主要是用于主内容较长时让侧边栏能保持显示,依赖于jQuery。

示例地址 http://www.jx3pve.com/macro

整个写作的原因是看到远人在慕课的一篇课程想来写的,不过做了功能细化。


使用方法

fixSidebar(selector,top,bottom,triggerScroll)

比如

fixSidebar('sidebar',30,80,100)

参数说明

selector是选择器,会被传入到jQuery中,如果没有则退出函数,故如果懒人的话直接加载在全局JS文件中即可。

top为传入的距顶位置,这个的作用是,如果存在fix的panel导航或用户条时,不传值的话则为0。

bottom为传入的距底位置,这个作用是距底位置,如果你还有全局的底部导航等时,应该设置此值,可以稍微比底栏高度再大一点点保留间距感,不传值的话则为0。

triggerScroll则是在v0.3的时候新加的,当时由于自己私人项目中的这个页面还有头部横幅,于是如果必要的话,你还可以设置,触发fix时的值,比如这个页面则在250以后开始触发。

内置自动判定了默认在页面中的实际水平坐标。当侧边栏长度小于页面长度时默认依据顶部来计算位置,当侧边栏长度大于页面时才依旧底部来计算位置

在最近副本栏目的应用中,由于幻灯滚动的存在,我发现会出现一点滚动异常,思忖良久,发觉是受幻灯overflow的BFC管理而导致的,最终的解决方法是给传入的selector设置overflow:hidden,必须由它自己管理约束自己。此项已自动在v0.4中加入在函数中了,无需再额外css设置。

  • fixSidebar是自己写的一个侧边栏固定小组件,主要是用于主内容较长时让侧边栏能保持显示,依赖于jQuery。 Github地址 https://github.com/iRuxu/fixSidebar  示例地址 http://www.jx3pve.com/macro 整个写作的原因是看到远人在慕课的一篇课程想来写的,不过做了功能细化。 使用方法 fixSidebar(selector,top

 相关资料
  • 左侧页面中使用的侧边栏提供了示例。创建侧边栏: <!-- 主侧边栏容器 --> <aside class="main-sidebar sidebar-dark-primary elevation-4"> <!-- 品牌 Logo --> <a href="index3.html" class="brand-link"> <img src="dist/im

  • 控制侧边栏是右边的侧边栏。它可以用于多种目的,并且非常易于创建。侧边栏附带两种不同的显示/隐藏样式。第一个允许侧边栏在内容上滑动。第二个推送内容以便为侧边栏腾出空间。可以通过 Javascript 选项 设置这两种方法。 将以下代码放在 .wrapper div 中。我更喜欢将其放在页脚之后。 固定控制侧边栏 通过将 .control-sidebar-push 添加到 body 中,这将会固定侧边

  • 可以从左侧或者右侧滑出的面板。 使用侧栏 在任何元素上增加 .open-panel 类都可以使它能点击打开侧栏。如果有多个侧栏,你可以通过 data-panel='{panel的选择}'来指定具体打开哪一个侧栏 在任何元素上增加 .close-panel 类都可以使他点击关闭侧栏,因为侧栏只能同时打开一个,所以关闭的时候你不用指定是哪一个侧栏。 可以通过 .panel-left 或者 .panel

  • 创建侧边栏对于以下目的很有用: 将 相关文档 分组 为每篇文档 显示一个侧边栏 提供带有 下一页/上一页(next/previous)按钮的 分页导航 要为你的 Docusaurus 网站添加侧边栏的话,需要: 创建一个导出(export) 侧边栏对象(sidebar object) 的文件。 将此对象直接或通过 @docusaurus/preset-classic 传递给 @docusaurus

  • 侧边栏导航 Foundation 使用 <ul> 创建侧边栏: 实例 <ul>   <li><a href="#">Link 1</a></li>   <li><a href="#">Link 2</a></li>   <li><a href="#">Link 3</a></li>   <li><a href="#">Link 4</a></li> </ul> 激活链接与分割线 已点击的链接可以在

  • 作为另一个实用的功能,我们增加一个显示GtkMenuButton,GtkRevealer和GtkListBox的侧边条。 <?xml version="1.0" encoding="UTF-8"?> <interface> <!-- interface-requires gtk+ 3.8 --> <template class="ExampleAppWindow" parent="GtkA

  • 路由和侧边栏是组织起一个后台应用的关键骨架。 本项目侧边栏和路由是绑定在一起的,所以你只有在 @/router/index.js 下面配置对应的路由,侧边栏就能动态的生成了。大大减轻了手动重复编辑侧边栏的工作量。当然这样就需要在配置路由的时候遵循一些约定的规则。 配置项 首先我们了解一下本项目配置路由时提供了哪些配置项。 // 当设置 true 的时候该路由不会在侧边栏出现 如401,login等

  • 导航和侧边栏 引用网站文档 如果你想在 docs 文件夹中引用另一个文档(或者你通过可选 customDocsPath路径站点配置选项设置的位置),那么你只需要使用你想引用的文档名称。 例如,如果你在 doc2.md 中,而你想引用 doc1.md: 这里引用了一个 [文档](doc1.md). Docusaurus 目前不支持嵌套文件夹中的文件; 只能是在一个平面文件结构中。 我们正在考虑添加