详解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 相关文章推荐
javascript document.compatMode兼容性
Feb 23 Javascript
GreyBox技术总结(转)
Nov 23 Javascript
javascript快速排序算法详解
Sep 17 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
老生常谈JavaScript数组的用法
Jun 10 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
关于vue-router路径计算问题
May 10 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
May 27 Javascript
在JavaScript中如何使用宏详解
May 06 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
php addslashes和mysql_real_escape_string
2010/01/24 PHP
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
php实现的中秋博饼游戏之掷骰子并输出结果功能详解
2017/11/06 PHP
新浪的图片新闻效果
2007/01/13 Javascript
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
top.location.href 没有权限 解决方法
2008/08/05 Javascript
js parsefloat parseint 转换函数
2010/01/21 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
AngularJS模块管理问题的非常规处理方法
2015/04/29 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
从vue源码看props的用法
2019/01/09 Javascript
浅谈js闭包理解
2019/03/28 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
python自动化测试之连接几组测试包实例
2014/09/28 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
类如何去实现接口
2013/12/19 面试题
护理专科毕业推荐信
2013/11/10 职场文书
大队委竞选演讲稿
2014/04/28 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
个人催款函范文
2015/06/23 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL