技术博客

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

信息发布:soゝso 发布日期:2016-11-03 16:40 热度:1580 分享到:

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建设。


本文主题

如果本文对你有帮助,那么请你赞助我,让我更有激情的写下去,帮助更多的人。

¥我需要走的更远,点击我 赞助。 如果还有疑问,点击我加群,为你提供最好的解答。


工具导航地图