Bootstrap Affix 插件 高级用法详细讲解
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;
。
属性名称 | 类型/默认值 | Data属性名称 | 详细描述 |
offset |
number | function | object 默认值:10 |
data-offset |
当浏览器动位置时,距离顶部的偏移像素。如果设置了一个数字,则该偏移量的值将被应用在顶部和底部。如果设置了一个对象偏移,则其值形如 offset: { top: 10 } 或 offset: { top: 10, bottom: 5 }。如果需要动态计算偏移,请使用函数。 |
本站就是采用Bootstarp建设。
版权所属:SO JSON在线解析
原文地址:https://www.sojson.com/blog/185.html
转载时必须以链接形式注明原始出处及本声明。
如果本文对你有帮助,那么请你赞助我,让我更有激情的写下去,帮助更多的人。