Bootstrap 固定定位（Affix）
来自：慕课网
http://www.imooc.com/code/5396
Affix 效果常见的有以下三种：
☑ 顶部固定
☑ 侧边栏固定
☑ 底部固定
固定定位--声明式触发固定定位
Affix 插件可以对任何元素进行固定定位，其中比较简单的方法，就是通过自定义属性 data 来触发。其主要包括两个参数：
1、data-spy：取值 affix，表示元素固定不变的。
2、data-offset：整数值，比如 90，表示元素 top 和 bottom 的值都是 90px，其包括两种方式：data-offset-top 和 data-offset-bottom。
- data-offset-top 用来设置元素距离顶部的距离。比如 90，表示元素距离顶部 90px，当用户从顶部向下拖动滚动条，当滚动的距离大于 90px 时，affix 元素不再滚动，就会固定在浏览器窗口顶部。
- data-offset-bottom 刚好与 data-offset-top 相反。
具体使用如下：
<div data-spy="affix" data-offset="90">affix元素</div>
分开设置 data-offset 值方式：
<div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div>
注意，在 body 要声明滚动监控。
<body data-spy="scroll" data-target="sidebarMenu">
注意，请在宽屏模式下查看效果。据我测试下来，使用声明式，就算设置了 data-offset-top 的值也会失效，需要在样式中给 affix 设置一个top值，与 data-offset-top 值相等。data-offset-bottom一样。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Bootstrap 附加导航（Affix）插件</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!--<style type="text/css">
/* Custom Styles */ ul.nav-tabs {
width: 140px;
margin-top: 20px;
border-radius: 4px;
border: 1px solid #ddd;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
}
ul.nav-tabs li {
margin: 0;
border-top: 1px solid #ddd;
}
ul.nav-tabs li:first-child {
border-top: none;
}
ul.nav-tabs li a {
margin: 0;
padding: 8px 16px;
border-radius: 0;
}
ul.nav-tabs li.active a,
ul.nav-tabs li.active a:hover {
color: #fff;
background: #0088cc;
border: 1px solid #0088cc;
}
ul.nav-tabs li:first-child a {
border-radius: 4px 4px 0 0;
}
ul.nav-tabs li:last-child a {
border-radius: 0 0 4px 4px;
}
ul.nav-tabs.affix {
top: 30px;
/* Set the top position of pinned element */
}
</style>-->
</head> <body data-spy="scroll" data-target="#myScrollspy">
<div class="container">
<!--<div class="jumbotron">
<h1>Bootstrap Affix</h1>
</div>-->
<div class="row">
<div class="col-xs-3" id="myScrollspy">
<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
<li class="active"><a href="#section-1">第一部分</a></li>
<li><a href="#section-2">第二部分</a></li>
<li><a href="#section-3">第三部分</a></li>
<li><a href="#section-4">第四部分</a></li>
<li><a href="#section-5">第五部分</a></li>
</ul>
</div> <div class="col-xs-9">
<h2 id="section-1">第一部分</h2>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<hr>
<h2 id="section-2">第二部分</h2>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<hr>
<h2 id="section-3">第三部分</h2>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<hr>
<h2 id="section-4">第四部分</h2>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<hr>
<h2 id="section-5">第五部分</h2>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
<p>a</p>
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body> </html>
Bootstrap 固定定位（Affix）的更多相关文章
- bootstrap 固定定位
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>Boo ...
- Bootstrap_Javascript_固定定位
Affix 插件可以对任何元素进行固定定位,其中比较简单的方法,就是通过自定义属性 data 来触发.其主要包括两个参数: 1.data-spy:取值 affix,表示元素固定不变的. 2.data- ...
- Bootstrap中的Affix插件
我们为什么要用bootstrap?因为懒!哦....不,是因为方便,呃...意思差不多. 今天来说说Affix这个插件,它可以使导航栏固定,免去了自己手写的麻烦,用着非常方便,废话不多说,下面是用法. ...
- Bootstrap 附加导航(Affix)插件
bootstrap 附加导航(Affix)插件允许某个div元素固定到页面中的某个位置.您可以打开或关闭使用该插件之间进行切换 后续再写
- 理解CSS相对定位和固定定位
× 目录 [1]相对定位 [2]固定定位 前面的话 一般地,说起定位元素是指position不为static的元素,包括relative.absolute和fixed.前面已经详细介绍过absolut ...
- position之fixed固定定位、absolute绝对定位和relative相对定位
什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...
- 解决ie6下不支持fix属性，模拟固定定位
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- 实现 DIV 固定定位在网页主体部分最右侧
position:fixed 相对于窗口的固定定位,这个窗口可理解为可视窗口,除了浏览器自己的东西,剩下的就是这个可视窗口.而大部分的网页都是窄屏设计,比如说网页主体部分固定宽 1200px,或者自适 ...
- input固定定位后，当input框获取到焦点时，会离开手机软键盘的解决方法
前些天做页面时候遇到这样一个问题,将input框用position:fixed固定定位在最底部的时候,当Input获取焦点的时候,input框离开了手机软键盘,而不是吸附在软键盘上,效果如下图: 找了 ...
随机推荐
- Spring的LoadTimeWeaver(代码织入)
在Java 语言中,从织入切面的方式上来看,存在三种织入方式:编译期织入.类加载期织入和运行期织入.编译期织入是指在Java编译期,采用特殊的编译器,将切面织入到Java类中:而类加载期织入则指通过特 ...
- 《DSP using MATLAB》示例Example4.6
用到的z变换的性质: 继续解题: 上代码: b = [0,0,0, 0.25, -0.5, 0.0625]; a = [1, -1, 0.75, -0.25, 0.0625]; % polynomia ...
- iOS10 UI教程基础窗口的内容与设置起始窗口
iOS10 UI教程基础窗口的内容与设置起始窗口 iOS10 UI教程基础窗口的内容与设置起始窗口,本章我们从iOS10开发中UI的基础知识开始讲解,其中包括了窗口.视图以及UI层次结构和Views的 ...
- NHibernate中多表（对象）间的查询
一个比较简单的查询代码如下: IList userList=session.Find (" from testMSSql.student as student where student ...
- EBay .Net SDK Api 实践
1.请求流程介绍 提供SOA地址:https://api.ebay.com/wsapi WSDL生成的代码在WebService.cs文件当中. ApiCall封装了所有的RPC, ...
- 利用TaskCompletionSource将EAP转换成TAP
1.原始的异步方法的调用 我们来看个简单的例子,在这里演示调用 WebClient.DownloadStringAsync 方法(这个方法不是 TAP),然后由 WebClient.Dow ...
- HDU5834 Magic boy Bi Luo with his excited tree（树形DP）
题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=5834 Description Bi Luo is a magic boy, he also ...
- Mishka and Divisors[CodeForces Round #365 Div.2]
http://codeforces.com/contest/703/problem/E 题意:给定一个最多个数的序列,从中选出最少个数的数字,使得他们的乘积是k的倍数,若有多种选择方式,输出选出数字和 ...
- Enum（枚举类型）的基本应用
一.前言 在我们日常的开发过程中,我们经常定义使用常量:在Effective Java建议用枚举来替换常量的使用,提高我们代码的质量,总结一下枚举定义常量的基本使用 二.枚举类型说明 1.枚 ...
- No configuration found for the specified action解决办法
http://blog.csdn.net/carefree31441/article/details/4857546 使用Struts2,配置一切正常,使用常用tag也正常,但是在使用<s:fo ...