详解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 相关文章推荐
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
JavaScript 更严格的相等 [译]
Sep 20 Javascript
JavaScript变量声明详解
Nov 27 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 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+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
js word表格动态添加代码
2010/06/07 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
详解vue-router基本使用
2017/04/18 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
Python中非常实用的一些功能和函数分享
2015/02/14 Python
python交互式图形编程实例(二)
2017/11/17 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
2014三八妇女节活动总结
2014/03/01 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
暑期工社会实践报告
2015/07/13 职场文书
全民创业工作总结
2015/08/13 职场文书
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android