详解BootStrap中Affix控件的使用及保持布局的美观的方法


Posted in Javascript onJuly 08, 2016

Affix是BootStrap中的一个很有用的控件,他能够监视浏览器的滚动条的位置并让你的导航始终都在页面的可视区域。一开始的时候,导航在页面中是普通的流式布局,占有文档中固定的位置,当页面滚动的时候,导航就自动变成了固定布局(fixed),始终处于用户的视区,下面来说说他的用法。首先来看看他的实现原理。它是通过实时修改页面元素的class属性来实现的

开始的时候应用affix的元素的class中会自动添加affxi-top属性

当滚动条滚动以至于导航快要到页面顶部的时候这时候在元素的class中会将affix-top变为affix

当拖动滚动条到页面底部的时候,affix又会自动变为affix-bottom

以上过程完全有控件自己实现,无须我们干预,我们只需要写好这些状态的css就可以了

如我们可以设置

.affix-top
{
top:150px;
}
.affix
{
top:20px;//通常用bootstrap构建的网站头部都有个导航条
}
.affix-bottom
{
……
}

下面我们看看它的使用方法

1、通过data属性

你只需为需要监听的页面元素添加data-spy="affix"即可。然后使用偏移量来确定一个元素的开和关.

<ul class="nav nav-tabs nav-stacked affix" data-spy="affix"
data-offset-top="190">
<li class="active"><a href="#one">Tutorial One</a></li>
<li><a href="#two">Tutorial Two</a></li>
<li><a href="#three">Tutorial Three</a></li>
</ul>

其中data-offset-top为处于affix-top状态元素距离页面顶端的位置。当滚动到页面顶端的使用我们可以设置".affix"的样式来重新设置其"top"值。

2、通过javascript调用

示例代码如下:

$('#myNav').affix({
offset: {
top: 100,//滚动中距离页面顶端的位置
bottom: function () {//滚动完成时距离页面底部的位置
return (this.bottom = 
$('.bs-footer').outerHeight(true))
}
}
})

HTML代码如下(只展示核心代码):

<ul class="nav nav-tabs nav-stacked affix" id="myNav">
<li class="active"><a href="#one">Tutorial One</a></li>
<li><a href="#two">Tutorial Two</a></li>
<li><a href="#three">Tutorial Three</a></li>
</ul>
……
<div class="bs-footer">
</div>

以上似乎已经介绍完了bootstrap中affix的使用,但是在实际使用的过程中我们会发现,当拖动滚动条的时候使用了affix的页面元素的宽度会发生变化,从而导致页面布局的杂乱,所以我们在定义affix的css中最好写死它的宽度如:

.affix{
width:250px;
}

这样在视窗足够大的时候是没有任何问题的,但是当拖动改变视窗的大小后会发现布局又变乱了,这个问题困扰了我许久,最后通过分析bootcss的源码我发现该网站在所有使用affix的元素的class中都添加了"hidden-print" "hidden-xs" "hidden-sm"这些属性,用于当屏幕不是符合要求的情况下可以隐藏affix,虽然影响了易用性,但是保证了布局无论在哪种情况下都是整齐的。

以上所述是小编给大家介绍的详解BootStrap中Affix控件的使用及保持布局的美观的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 Javascript
innerText和innerHTML 一些问题分析
May 18 Javascript
JS判定是否原生方法
Jul 22 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
Dec 31 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
axios基本入门用法教程
Mar 25 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
element-ui表格数据转换的示例代码
Aug 24 Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 Javascript
Augularjs-起步详解
Jul 08 #Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 #Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 #Javascript
Angularjs---项目搭建图文教程
Jul 08 #Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 #Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 #Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 #Javascript
You might like
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
UCenter Home二次开发指南
2009/05/28 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
Python备份Mysql脚本
2008/08/11 Python
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
Python编程之event对象的用法实例分析
2017/03/23 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
运动会通讯稿300字
2014/02/02 职场文书
更夫岗位责任制
2014/02/11 职场文书
经济担保书范文
2014/04/02 职场文书
供货协议书范本
2014/04/22 职场文书
工会工作先进事迹
2014/08/18 职场文书
清明节随笔
2015/08/15 职场文书
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python