Bootstrap Affix导航——附加导航

2016.7.11

Bootstrap Affix导航——附加导航[链接 bootstrap中文文档]
可以实现的效果:



affix导航可以在一段距离之前和页面其它内容一起滚动,达到某个设定值时固定在页面上,不再滚动,达到一个悬浮导航的作用。
还可以搭配滚动监听一起使用。

***使用方法:
真的不得不说bootstrap的强大,使用极其简单。
eg:
<div class="inline-block" data-spy="affix" data-offset-top="50">

在需要使用的地方,添加data-spy="affix" data-offset-top="设定值",其实这样就可以啦。
但是更好的控制高度,可以在css里设定affix类的top属性:
div.inline-block.affix{
top: 50px;
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,816评论 1 92
  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 5,071评论 0 66
  • Bootstrap 是基于H5利用 JS和CSS 进行布局、提供插件、动画的一个框架。使用了JQuery进行DOM...
    轩居晨风阅读 999评论 0 5
  • 原文出处 http://blog.poetries.top/2016/11/19/bootstrap-review...
    前端进阶之旅阅读 7,139评论 0 42
  • 第4章 Bootstrap装饰插件 JavaScript是网页上事实上的脚本语言。流行的网页功能,例如:漂亮的图片...
    海上名月阅读 1,651评论 5 6