确定监测类型与监测链接
data-spy="scroll"
:确定监测类型为滚动data-target="#myScrollspy"
:确定监测链接为id为myScrollspy的元素
添加为affix类时的css
-
使导航栏固定在离顶部30px的位置
ul.nav-tabs.affix{ top: 30px; /* Set the top position of pinned element */ }
设置添加了附加导航的元素的偏移量
-
意思是使添加了affix(附加导航)的元素的最顶部距离窗口的顶部为125px,在实际的操作中,当网页窗口垂直滚动了125px的时候,配合之前添加的affix类的css,那么附加导航栏就会固定在距离网页窗口顶部30px的位置,即position:fixed;
<script> $(document).ready(function(){ $("#myNav").affix({ offset: { top: 125 } }); }); </script>
上面实现的原理
- 附加导航(Affix)插件在三种class之间切换: .affix、.affix-top 和 .affix-bottom。
- 当还没有滑动到超过设定的125px时,插件的class为.affix-top。此时,不需要任何的css样式和定位。
- 当滑动到125px时,插件的class为.affix。此时,使用上面设定的css样式,附加导航栏固定下来。
- 当滑动到超过125px时,应把 .affix 替换为 .affix-bottom。这时,假如设置了该偏移,则要求同时设置适当的 CSS。必要的时候添加 position: absolute;。