详解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 相关文章推荐
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
Javascript 面向对象(三)接口代码
May 23 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
vue双花括号的使用方法 附练习题
Nov 07 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
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
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
FireFox中textNode分片的问题
2007/04/10 Javascript
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
详解微信小程序 登录获取unionid
2017/06/27 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
员工年终演讲稿
2014/01/03 职场文书
中学生自我鉴定
2014/02/04 职场文书
红旗方阵解说词
2014/02/12 职场文书
大学新闻系自荐书
2014/05/31 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
物业接待员岗位职责
2015/04/15 职场文书
保护地球的宣传语
2015/07/13 职场文书
对象析构函数__del__在Python中何时使用
2022/03/22 Python