Bootstrap中的Affix插件

我们为什么要用bootstrap？因为懒！哦....不，是因为方便，呃...意思差不多。

今天来说说Affix这个插件，它可以使导航栏固定，免去了自己手写的麻烦，用着非常方便，废话不多说，下面是用法。

Affix用法：

通过 data 属性：如需向元素添加附加导航（Affix）行为，只需要向需要监听的元素添加 data-spy="affix" 即可。请使用偏移来定义何时切换元素的锁定和移动。

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200">code...
</div>

data-spy : 该属性可以让导航栏固定，不过用了这个属性可能会使你的页面结构发生改变，比如CSS的层级或样式问题。
data-offset-top : 该属性用来设置距离页面顶部偏移多少，然后再使导航定位。
data-offset-bottom : 该属性用来设置距离页面底部偏移多少，然后再使导航定位。

还有另一种方法：

通过 JavaScript：您可以通过 JavaScript 手动为某个元素添加附加导航（Affix），如下所示：

$('#myAffix').affix({offset: {top: 100,bottom: function () {return (this.bottom = $('.footer').outerHeight(true))}}
})

获取到标签，调用affix方法，用offset对象设置属性和属性值。

这个插件不管是横竖的导航条都很实用，用法套路也是差不多的，还是看项目用哪种方法合适吧。

最后附上bootstrap中文网的affix链接，不过没有中文翻译：http://v3.bootcss.com/javascript/#affix

转载于:https://www.cnblogs.com/bfc0517/p/6964699.html

Bootstrap中的Affix插件相关推荐

使用bootstrap中的toolTip插件时最上方提示会被遮挡问题
Bootstrap 里的 popover 被挡住的解决方案在Bootstarp 中我们可以使用 popover 插件做一些内容的展示, 代码如下: <a data-toggle="p ...
Bootstrap中DropDown插件显示下拉列表，点击下拉列表区域，不会再自动关闭。
目标: Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭. 参考:http://v3.bootcss.com/javascript/#dropdowns / ...
BootStrap中Affix控件的使用方法及如何保持布局的美观
Affix是BootStrap中的一个很有用的控件,他能够监视浏览器的滚动条的位置并让你的导航始终都在页面的可视区域.一开始的时候,导航在页面中是普通的流式布局,占有文档中固定的位置,当页面滚动的时候 ...
在Bootstrap开发框架中使用bootstrap-datepicker插件
在基于Boostrap的Web开发中,往往需要录入日期内容,基于Boostrap的插件中,关于日期的录入可以使用bootstrap-datepicker这个非常不错的插件,以替代默认的type=dat ...
java多图片上传插件,Bootstrap中的fileinput 多图片上传及编辑功能
Bootstrap中的fileinput 多图片上传及编辑功能 2019-01-01 编程之家收集整理的这篇文章主要介绍了Bootstrap中的fileinput 多图片上传及编辑功能,编程之家小编觉 ...
基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用...
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...
bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象
轮播图: bootstrap封装了轮播图的功能,其具体如下: 类名描述 .carousel 创建一个轮播图块的容器,实质是做布局用:且此容器应该有一个di属性,其属性值提供给下面左右按钮href锚点 ...
bootstrap中分页、面包屑导航、列表组、卡片、下拉菜单、折叠
分页: 分页功能是当遇到数据很多时,如果都放到一个页面上,那么找起来很不方便,而且不利于性能.此时采用分页功能就能很好的优化用户体验,可是如果自己开发分页功能,那么就会影响开发效率,bootstrap ...
Bootstrap3 Affix插件
Affix Affix插件(affix.js)是一个很有用的插件,它可以让你的导航始终都固定在某个位置.一开始的时候,导航出现在页面的某个位置,当页面滚动一定距离时,无论页面如何滚动,它都固定在一个位 ...

Bootstrap中的Affix插件

Bootstrap中的Affix插件相关推荐

最新文章

热门文章