版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zeping891103/article/details/79066578

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

附加导航API只有一个，入参项：

offset，属性data-offset（默认值为10），当计算滚动位置时，距离顶部的偏移像素。如果设置了一个数字，则该偏移量的值将被应用在顶部和底部。如果设置了一个对象偏移，则其值形如 offset: { top: 10 } 或 offset: { top: 10, bottom: 5 }。如果需要动态计算偏移，请使用函数。

演示代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><link rel="stylesheet" href="../libs/bootstrap/3.3.7/css/bootstrap.min.css" /><script src="../libs/jquery/3.2.1/jquery.min.js"></script><script src="../libs/bootstrap/3.3.7/bootstrap.min.js"></script><style>ul.nav-tabs {width: 140px;/*margin-top: 20px;*/border-radius: 4px;border: 1px solid #ddd;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);}/*如果此处margin-top: 20px;没有注释掉，计算data-offset-top时需加上该20像素，才能达到平稳过渡效果*/ul.nav-tabs li {margin: 0;border-top: 1px solid #ddd;}ul.nav-tabs li:first-child {border-top: none;}ul.nav-tabs li a {margin: 0;padding: 8px 16px;border-radius: 0;}ul.nav-tabs li.active a,ul.nav-tabs li.active a:hover {color: #fff;background: #0088cc;border: 1px solid #0088cc;}ul.nav-tabs li:first-child a {border-radius: 4px 4px 0 0;}ul.nav-tabs li:last-child a {border-radius: 0 0 4px 4px;}/*data-offset-top="190"表示当滚动190像素后，开始以下面的top:30px为准固定在界面*/ul.nav-tabs.affix {top: 30px;}</style></head><body data-spy="scroll" data-target="#myScrollspy"><div class="container"><div class="jumbotron"><h1>附加导航</h1></div><div class="row"><div class="col-sm-3" id="myScrollspy"><ul id="myNav" class="nav nav-tabs nav-stacked"><li class="active"><a href="#section-1">第一部分</a></li><li><a href="#section-2">第二部分</a></li><li><a href="#section-3">第三部分</a></li><li><a href="#section-4">第四部分</a></li><li><a href="#section-5">第五部分</a></li></ul></div><div class="col-sm-9"><h2 id="section-1">第一部分</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p><p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p><hr><h2 id="section-2">第二部分</h2><p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. In dapibus velit blandit pharetra tincidunt. Quisque non sapien nec lacus condimentum facilisis ut iaculis enim. Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.</p><p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis malesuada at, pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis, diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum bibendum blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit tincidunt ante. Vivamus sem augue, hendrerit non sapien in, mollis ornare augue.</p><hr><h2 id="section-3">第三部分</h2><p>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl semper tortor, vel sagittis lacus est consequat eros. Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit amet mauris.</p><p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit dolor eget ante rutrum adipiscing. Cras interdum ipsum mattis, tempus mauris vel, semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies ac ligula. Pellentesque convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse potenti. Integer pellentesque neque et elementum tempus. Curabitur bibendum in ligula ut rhoncus.</p><p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo sed ligula porta semper eu quis enim. Pellentesque pellentesque, metus at facilisis hendrerit, lectus velit facilisis leo, quis volutpat turpis arcu quis enim. Nulla viverra lorem elementum interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus. Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p><hr><h2 id="section-4">第四部分</h2><p>Suspendisse a orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi gravida, faucibus convallis neque pretium. Maecenas quis sapien ut leo fringilla tempor vitae sit amet leo. Donec imperdiet tempus placerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mi pretium, fermentum lacus et, viverra tellus. Phasellus sodales libero nec dui convallis, sit amet fermentum sapien auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eu elementum nibh, quis varius libero.</p><p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p><p>Phasellus fermentum, neque sit amet sodales tempor, enim ante interdum eros, eget luctus ipsum eros ut ligula. Nunc ornare erat quis faucibus molestie. Proin malesuada consequat commodo. Mauris iaculis, eros ut dapibus luctus, massa enim elementum purus, sit amet tristique purus purus nec felis. Morbi vestibulum sapien eget porta pulvinar. Nam at quam diam. Proin rhoncus, felis elementum accumsan dictum, felis nisi vestibulum tellus, et ultrices risus felis in orci. Quisque vestibulum sem nisl, vel congue leo dictum nec. Cras eget est at velit sagittis ullamcorper vel et lectus. In hac habitasse platea dictumst. Etiam interdum iaculis velit, vel sollicitudin lorem feugiat sit amet. Etiam luctus, quam sed sodales aliquam, lorem libero hendrerit urna, faucibus rhoncus massa nibh at felis. Curabitur ac tempus nulla, ut semper erat. Vivamus porta ullamcorper sem, ornare egestas mauris facilisis id.</p><p>Ut ut risus nisl. Fusce porttitor eros at magna luctus, non congue nulla eleifend. Aenean porttitor feugiat dolor sit amet facilisis. Pellentesque venenatis magna et risus commodo, a commodo turpis gravida. Nam mollis massa dapibus urna aliquet, quis iaculis elit sodales. Sed eget ornare orci, eu malesuada justo. Nunc lacus augue, dictum quis dui id, lacinia congue quam. Nulla sem sem, aliquam nec dolor ac, tempus convallis nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla suscipit convallis iaculis. Quisque eget commodo ligula. Praesent leo dui, facilisis quis eleifend in, aliquet vitae nunc. Suspendisse fermentum odio ac massa ultricies pellentesque. Fusce eu suscipit massa.</p><hr><h2 id="section-5">第五部分</h2><p>Nam eget purus nec est consectetur vehicula. Nullam ultrices nisl risus, in viverra libero egestas sit amet. Etiam porttitor dolor non eros pulvinar malesuada. Vestibulum sit amet est mollis nulla tempus aliquet. Praesent luctus hendrerit arcu non laoreet. Morbi consequat placerat magna, ac ornare odio sagittis sed. Donec vitae ullamcorper purus. Vivamus non metus ac justo porta volutpat.</p><p>Vivamus mattis accumsan erat, vel convallis risus pretium nec. Integer nunc nulla, viverra ut sem non, scelerisque vehicula arcu. Fusce bibendum convallis augue sit amet lobortis. Cras porta urna turpis, sodales lobortis purus adipiscing id. Maecenas ullamcorper, turpis suscipit pellentesque fringilla, massa lacus pulvinar mi, nec dignissim velit arcu eget purus. Nam at dapibus tellus, eget euismod nisl. Ut eget venenatis sapien. Vivamus vulputate varius mauris, vel varius nisl facilisis ac. Nulla aliquet justo a nibh ornare, eu congue neque rutrum.</p><p>Suspendisse a orci facilisis, dignissim tortor vitae, ultrices mi. Vestibulum a iaculis lacus. Phasellus vitae convallis ligula, nec volutpat tellus. Vivamus scelerisque mollis nisl, nec vehicula elit egestas a. Sed luctus metus id mi gravida, faucibus convallis neque pretium. Maecenas quis sapien ut leo fringilla tempor vitae sit amet leo. Donec imperdiet tempus placerat. Pellentesque pulvinar ultrices nunc sed ultrices. Morbi vel mi pretium, fermentum lacus et, viverra tellus. Phasellus sodales libero nec dui convallis, sit amet fermentum sapien auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eu elementum nibh, quis varius libero.</p><p>Morbi sed fermentum ipsum. Morbi a orci vulputate tortor ornare blandit a quis orci. Donec aliquam sodales gravida. In ut ullamcorper nisi, ac pretium velit. Vestibulum vitae lectus volutpat, consequat lorem sit amet, pulvinar tellus. In tincidunt vel leo eget pulvinar. Curabitur a eros non lacus malesuada aliquam. Praesent et tempus odio. Integer a quam nunc. In hac habitasse platea dictumst. Aliquam porta nibh nulla, et mattis turpis placerat eget. Pellentesque dui diam, pellentesque vel gravida id, accumsan eu magna. Sed a semper arcu, ut dignissim leo.</p><p>Sed vitae lobortis diam, id molestie magna. Aliquam consequat ipsum quis est dictum ultrices. Aenean nibh velit, fringilla in diam id, blandit hendrerit lacus. Donec vehicula rutrum tellus eget fermentum. Pellentesque ac erat et arcu ornare tincidunt. Aliquam erat volutpat. Vivamus lobortis urna quis gravida semper. In condimentum, est a faucibus luctus, mi dolor cursus mi, id vehicula arcu risus a nibh. Pellentesque blandit sapien lacus, vel vehicula nunc feugiat sit amet.</p></div></div></div></body><script>$(document).ready(function() {$("#myNav").affix({offset: {top: 190}});});</script></html>

效果图：

转载于:https://my.oschina.net/u/3987720/blog/2962676

响应式前端框架Bootstrap系列（20）附加导航（Affix）插件相关推荐

  1. 最先进的响应式前端框架：Foundation 5！

    Foundation,作为一款优秀的响应式前端框架,可帮助开发者快速构建原型及搭建跨平台的网站及应用.其强大的功能,可嵌套的12列响应式网格布局,使Foundation成为Github中最棒的20个明 ...

  2. 响应式前端框架Admui太完备了，太美了

    http://www.admui.com/demo

  3. 响应式html5框架,15个最好的HTML5前端响应式框架(2014)

    注1* 之前我们比较过Foundation和Bootstrap, 这篇文章更加系统地介绍了目前比较浏览的前端响应式框架. 注2* 文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表 ...

  4. 《响应式网页设计》系列分享专栏

    2019独角兽企业重金招聘Python工程师标准>>> <响应式网页设计>已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/ ...

  5. html5 2015,2015年有用的16大免费的响应式HTML5框架

    Twitter Bootstrap Bootstrap是全世界最流行的html5框架之一.Twitter Bootstrap是光滑的.直观和强大的前端web开发框架,令开发更加快捷.容易.它拥有用于开 ...

  6. 15 个优秀的响应式 CSS 框架

    官网:http://foundation.zurb.com/ [](()5. Material Design for Bootstrap (MDB) MDB 建立在 Bootstrap 之上,并提供了 ...

  7. Web前端快速开发 Bootstrap 响应式UI框架

    文章目录 前言 Bootstrap介绍 Bootstrap3 Bootstrap 响应式UI框架 使用 布局容器 栅格系统 响应式工具类 bootstrap4 bootstrap5 变化的内容 前言 ...

  8. 前端ui框架_跨屏建站发布同名响应式前端ui框架

    跨屏建站发布同名响应式前端ui框架,它是跨屏建站关于前端页面构建上的积累的结晶,现已开源,我们将持续的用开源的方式做好ui框架产品,用心做好建站产品. 关于 跨屏UI框架是基于Bootstrap的扩展 ...

  9. 响应式布局与Bootstrap框架

    响应式布局与Bootstrap框架 1.rem基础 rem(root em)是一个相对单位,类似em,em是父元素字体大小 不同的是rem的基准是相对于html元素的字体大小 rem的优点就是可以通过 ...

最新文章

  1. NMHDR 与 NM_LISTVIEW,NM_TREEVIEW 的关系
  2. Trinity 1.1 发布，Linux 桌面环境
  3. Jeecg-boot 2.4.6+ 多租户改造方案（涉及菜单部门角色等基础模块）
  4. 使用VisualTreeHelper.GetDrawing(Visual v)枚举所有Visual内容的对象
  5. SpringCloud:汇总(Gradle项目)
  6. 前端、后端、运维都能用的动态 json 数据管理神器，节省你大量的开发、设计数据库、运维的时间...
  7. 集合:在我的世界里，你就是唯一 - 零基础入门学习Python027
  8. [开发回忆录]第三方模块的松耦合
  9. ajax表单提交post(错误400) 序列化表单（post表单转换json(序列化)）
  10. .netcore 2.0 mysql_MySQL数据库之.Net Core 2.0 使用EF连接MySQL数据库
  11. 华为模拟器eNSP将防火墙配置成三层核心交换机
  12. 华为Metn40有没有鸿蒙系统,华为matex2测评_华为matex2上手测评
  13. 2019第十届蓝桥杯A组决赛(国赛)A题（三升序列）
  14. linux下安装以太坊(ETH/ETC)节点
  15. 个人博客选什么域名?
  16. 程序员最容易的病---发胖啤酒肚
  17. NASA的下一个十年（译）
  18. 关于Unicode字符集(http://blog.sina.com.cn/s/blog_4b4409c30100vw9t.html)
  19. 新手小白postman学习记录，自用
  20. “神奇”的拉马努金矩阵

热门文章

  1. 服务器显示器怎么变1080p,如何设置「吃鸡」画面，才能既看得清，又足够流畅？...
  2. python图像处理-图片分类项目
  3. 什么是CN2线路？什么是美国CN2服务器？
  4. android之ViewPager与TabLayout
  5. 在阿里云服务器windows server 2008r2上面搭建FTP服务器
  6. 美国西北大学计算机学院教授,美国西北大学化学院院长Teri W. Odom教授访问玛丽女王工程学院...
  7. 安卓手机备份_苹果手机搬家功能在哪
  8. Downie 3 for Mac(视频下载软件)
  9. 淘客技术总结-如何获取二合一链接的优惠券信息
  10. java 自动编码器,Reca编码器下载 Java宇节码编辑器 Reca v2.11.0 官方免费版 下载-脚本之家...