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

JSON 2016-11-03 16:40:52 6210

Bootstrap 附加导航（Affix）插件

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

Demo：https://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="https://www.sojson.com/json/" title="JSON 教程">JSON 教程</a></li>
	  <li class=""><a href="https://www.sojson.com/json/json_intro.html" title="JSON 简介">JSON 简介</a></li>
	  <li class=""><a href="https://www.sojson.com/json/json_syntax.html" title="JSON 语法">JSON 语法</a></li>
	  <li class=""><a href="https://www.sojson.com/json/json_eval.html" title="JSON 使用">JSON 使用</a></li>
	  <li class=""><a href="https://www.sojson.com/in.html" title="10分钟掌握JSON">10分钟掌握JSON</a></li>
	  <li class=""><a href="https://www.sojson.com/blog/25.html" title="JSON.stringify 函数">JSON.stringify 函数</a></li>
	  <li class=""><a href="https://www.sojson.com/blog/100.html" title="Java中json-lib操作">Java中json-lib操作</a></li>
	  <li class=""><a href="https://www.sojson.com/blog/20.html" title="Java中json-lib操作">Json-lib jar包下载</a></li>
	  <li class=""><a href="https://www.sojson.com/blog/46.html" title="Http JSON代替Webservice">Http JSON代替Webservice</a></li>
	  <li class=""><a href="https://www.sojson.com/blog/1.html" title="JSON 和XML比较">JSON 和XML比较</a></li>
	  <li class=""><a href="https://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="https://www.sojson.com/json/" title="JSON 教程">JSON 教程</a></li>
	  <li class=""><a href="https://www.sojson.com/json/json_intro.html" title="JSON 简介">JSON 简介</a></li>
	  <li class=""><a href="https://www.sojson.com/json/json_syntax.html" title="JSON 语法">JSON 语法</a></li>
	  <li class=""><a href="https://www.sojson.com/json/json_eval.html" title="JSON 使用">JSON 使用</a></li>
	  <li class=""><a href="https://www.sojson.com/in.html" title="10分钟掌握JSON">10分钟掌握JSON</a></li>
	  <li class=""><a href="https://www.sojson.com/blog/25.html" title="JSON.stringify 函数">JSON.stringify 函数</a></li>
	  <li class=""><a href="https://www.sojson.com/blog/100.html" title="Java中json-lib操作">Java中json-lib操作</a></li>
	  <li class=""><a href="https://www.sojson.com/blog/20.html" title="Java中json-lib操作">Json-lib jar包下载</a></li>
	  <li class=""><a href="https://www.sojson.com/blog/46.html" title="Http JSON代替Webservice">Http JSON代替Webservice</a></li>
	  <li class=""><a href="https://www.sojson.com/blog/1.html" title="JSON 和XML比较">JSON 和XML比较</a></li>
	  <li class=""><a href="https://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（不依赖此插件）。

在开始时，插件添加 .affix-top 来指示元素在它的最顶端位置。这个时候不需要任何的 CSS 定位。
当滚动经过添加了附加导航（Affix）的元素时，应触发实际的附加导航（Affix）。此时 .affix 会替代 .affix-top ，同时设置position: fixed; （由 Bootstrap 的 CSS 代码提供）。
如果定义了底部偏移，当滚动到达该位置时，应把 .affix 替换为.affix-bottom 。由于偏移是可选的，假如设置了该偏移，则要求同时设置适当的 CSS。在这种情况下，请在必要的时候添加position: absolute; 。