Bootstrap Affix 插件 高级用法详细讲解

soゝso 2016-11-03 16:40:52 1721
分享到:

Bootstrap 附加导航(Affix)插件

附加导航(Affix)插件允许某个 <div> 固定在页面的某个位置。您也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始,但当页面点击某个标记,该 <div> 会锁定在某个位置,不会随着页面其他部分一起滚动。

Demo:http://www.sojson.com/json/

这个Demo链接你上下滑动的时候。注意一个细节,到了最下面碰到footer的时候,自动又往上顶,这个是需要用 function 来解决。先把代码贴一下:

HTML代码

<div class="bc-sidebar affix-top" id="myAffix">
	<ul class="nav nav-list nav-tabs nav-stacked bs-docs-sidenav dropdown" style="width: 255px;">
	  <li class="active"><a href="http://www.sojson.com/json/" title="JSON 教程">JSON 教程</a></li>
	  <li class=""><a href="http://www.sojson.com/json/json_intro.html" title="JSON 简介">JSON 简介</a></li>
	  <li class=""><a href="http://www.sojson.com/json/json_syntax.html" title="JSON 语法">JSON 语法</a></li>
	  <li class=""><a href="http://www.sojson.com/json/json_eval.html" title="JSON 使用">JSON 使用</a></li>
	  <li class=""><a href="http://www.sojson.com/in.html" title="10分钟掌握JSON">10分钟掌握JSON</a></li>
	  <li class=""><a href="http://www.sojson.com/blog/25.html" title="JSON.stringify 函数">JSON.stringify 函数</a></li>
	  <li class=""><a href="http://www.sojson.com/blog/100.html" title="Java中json-lib操作">Java中json-lib操作</a></li>
	  <li class=""><a href="http://www.sojson.com/blog/20.html" title="Java中json-lib操作">Json-lib jar包下载</a></li>
	  <li class=""><a href="http://www.sojson.com/blog/46.html" title="Http JSON代替Webservice">Http JSON代替Webservice</a></li>
	  <li class=""><a href="http://www.sojson.com/blog/1.html" title="JSON 和XML比较">JSON 和XML比较</a></li>
	  <li class=""><a href="http://www.sojson.com/blog/121.html" title="JSONP 的工作原理,JSONP Demo讲解">JSONP Demo讲解</a></li>
	</ul>
</div>

注意div 上要增加class="affix-top"  ,并且最好定义一个id 。

Javascript 代码

$('#myAffix').affix({
	  offset: {
		top: 202,
		bottom: function () {
		  //不超过footer 高度 + 165px 的位置
		  return (this.bottom =  $('.footer').height() +165 );
		}
	  }
});

top:是页面顶部到菜单的高度,其实也就是滚动条滚动到这个位置的时候,开始跟着顶部走。

bottom:同理是滚动到一定程度,距离页面最底部需要空余多少空间出来。(px)

下面来一张图说明。

然后就可以了,这是高级用法,但是我发现了一个BUG,还是只有我这里有问题?

到底部后条件bottom 满足后,元素(div)添加了一个属性position: relative; 和动态的 top 值,来固定高度。但是再往上滑动滚动条的时候,这个属性没有删除position: relative;导致再一次滚动失效了,因为固定住这个元素(div)了。这个时候我把代码改成这样了。下面看看。

$('#myAffix').affix({
	  offset: {
		top: function () {
		   //当往上滚动的时候,判断一下有没有这个属性,如果有就删除style。
		   if($('#myAffix').v('style') == 'position: relative;'){
			   $('#myAffix').removeAttr('style');
		   }
		   return 202;
		},
		bottom: function () {
		  //不超过footer 高度 + 165px 的位置
		  return (this.bottom = $('.footer').height() +165 );
		}
	  }
});

解决了这个Bug 。 如果有更好的办法告知我。

Data配置方式

<div class="bc-sidebar affix-top" data-spy="affix" data-offset-top="200" data-offset-bottom="256">
	<ul class="nav nav-list nav-tabs nav-stacked bs-docs-sidenav dropdown" style="width: 255px;">
	  <li class="active"><a href="http://www.sojson.com/json/" title="JSON 教程">JSON 教程</a></li>
	  <li class=""><a href="http://www.sojson.com/json/json_intro.html" title="JSON 简介">JSON 简介</a></li>
	  <li class=""><a href="http://www.sojson.com/json/json_syntax.html" title="JSON 语法">JSON 语法</a></li>
	  <li class=""><a href="http://www.sojson.com/json/json_eval.html" title="JSON 使用">JSON 使用</a></li>
	  <li class=""><a href="http://www.sojson.com/in.html" title="10分钟掌握JSON">10分钟掌握JSON</a></li>
	  <li class=""><a href="http://www.sojson.com/blog/25.html" title="JSON.stringify 函数">JSON.stringify 函数</a></li>
	  <li class=""><a href="http://www.sojson.com/blog/100.html" title="Java中json-lib操作">Java中json-lib操作</a></li>
	  <li class=""><a href="http://www.sojson.com/blog/20.html" title="Java中json-lib操作">Json-lib jar包下载</a></li>
	  <li class=""><a href="http://www.sojson.com/blog/46.html" title="Http JSON代替Webservice">Http JSON代替Webservice</a></li>
	  <li class=""><a href="http://www.sojson.com/blog/1.html" title="JSON 和XML比较">JSON 和XML比较</a></li>
	  <li class=""><a href="http://www.sojson.com/blog/121.html" title="JSONP 的工作原理,JSONP Demo讲解">JSONP Demo讲解</a></li>
	</ul>
</div>

这样的方式就是不能计算,值是死的。

data-spy="affix" data-offset-top="200" data-offset-bottom="256"

实现Affix

在上面两种使用附加导航(Affix)插件的方式中,您都必须通过  CSS   定位内容。附加导航(Affix)插件在三种 class 之间切换,每种 class 都呈现了特定的状态: .affix .affix-top .affix-bottom 。请按照下面的步骤,来为这三种状态设置您自己的 CSS(不依赖此插件)。

  1. 在开始时,插件添加 .affix-top  来指示元素在它的最顶端位置。这个时候不需要任何的 CSS 定位。

  2. 当滚动经过添加了附加导航(Affix)的元素时,应触发实际的附加导航(Affix)。此时 .affix 会替代 .affix-top ,同时设置position: fixed; (由 Bootstrap 的 CSS 代码提供)。

  3. 如果定义了底部偏移,当滚动到达该位置时,应把 .affix 替换为.affix-bottom 。由于偏移是可选的,假如设置了该偏移,则要求同时设置适当的 CSS。在这种情况下,请在必要的时候添加position: absolute;

 属性名称  类型/默认值  Data属性名称  详细描述
 

offset

 

number | function | object

默认值:10

 

data-offset

 

当浏览器动位置时,距离顶部的偏移像素。如果设置了一个数字,则该偏移量的值将被应用在顶部和底部。如果设置了一个对象偏移,则其值形如 offset: { top: 10 } 或 offset: { top: 10, bottom: 5 }。如果需要动态计算偏移,请使用函数。


本站就是采用Bootstarp建设。


关于作者
目前就职于国内某电商平台公司打杂。。
相关文章
Maven的Mirror和Repository 的详细讲解
document.domain解决跨域问题,详细讲解
Plupload 上传详细讲解,Plupload 多实例上传,Plupload多个上传按钮
Elasticsearch 插件(备忘录)
Myecilpse,Eclipse安装Freemarker插件【附件】
wangEditor 添加高亮 highlightJS 插件
HttpClient 获取详细的头信息
BlockingQueue 方法详细描述
MyEclipse8.5,MyEclipse10,安装ERMaster 建模插件
Elasticsearch教程(四) elasticsearch head 插件安装和使用
最新文章
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 39042
JS解密,JavaScript 解密,任何JS加密都能100%解密,以及JS 加密讲解 78
阿里云DNS 解析讲解,SEO配置搜索引擎线路解析 44
百度秒收录教程,怎么做到百度秒收入你的页面,SEO 教程 98
CDN 请求返回 connection reset by peer,被拦截请求解决方案 36
Google AdSense 申请技巧,谷歌广告申请通不过教程 68
Mac 安装 JMeter,JMeter 下载,JMeter Http 压力测试【图解】 49
Java 随机从 List 随机获取多个不重复对象,Mysql 随机10条数据 73
支付宝吱口令自动复制脚本,自动复制 JavaScript 代码介绍 895
谈谈这次对 SOJSON 的改版 149
最热文章
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 39042
Elasticsearch教程(四) elasticsearch head 插件安装和使用 109094
Elasticsearch教程(六) elasticsearch Client创建 73304
Elasticsearch教程(八) elasticsearch delete 删除数据(Java) 70759
Elasticsearch教程(二),IK分词器安装 67494
Elasticsearch教程(三),IK分词器安装 (极速版) 54088
Elasticsearch教程(五) elasticsearch Mapping的创建 51612
Elasticsearch教程(一),全程直播(小白级别) 51358
Elasticsearch教程(七) elasticsearch Insert 插入数据(Java) 47776
Elasticsearch权威指南-中文.pdf,Elasticsearch 中文文档下载 40932

骚码加入我们 / 千人QQ群:259217951

入群需要5元,如果没有QQ钱包,可以先Alipay、微信,赞助然后加群主拉进。

二维码生成 来自 >> 二维码生成器

支付扫码

所有赞助/开支都讲公开明细,用于网站维护:赞助名单查看

正在加载... ...