当前位置：首页 >前端技术 > Bootstrap导航悬浮顶部,stickUp

Bootstrap导航悬浮顶部,stickUp

前端技术

stickUp

一个 jQuery 插件

这是一个简单的jQuery插件，它能让页面目标元素 “固定” 在浏览器窗口的顶部，即便页面在滚动，目标元素仍然能出现在设定的位置。此插件可以在多页面的网站上工作，也能在单页面上面实现导航功能。滚动当前页面看看导航条的效果吧。

首先我们去下载我们需要的js和css文件 https://github.com/LiranCohen/stickUp

经研究必要的js和css为

bootstrap.min.css

stickup.css

jquery.js

bootstrap.min.js

stickUp.min.js

请注意笔者引入的顺序哦.千万别弄错了.

写这个关键部分是导航部分:

关键代码如下(官方的样式):

<!--这里是导航--><div class="navbar-wrapper"><div class="container"><div class="navbarwrapper" ><div class="navbar navbar-inverse navbar-static-top"><div class="container"><div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li class="menuItem active"><a href="#home">首页</a></li><li><li class="menuItem"><a href="#yw">语文</a></li><li class="menuItem"><a href="#sx">数学</a></li><li class="menuItem"><a href="#wl">物理</a></li><li class="menuItem"><a href="#hx">化学</a></li><li class="menuItem"><a href="#sw">生物</a></li><li class="menuItem"><a href="#zz">政治</a></li><li class="menuItem"><a href="#dl">地理</a></li><li class="menuItem"><a href="#yy">英语</a></li><li class="menuItem"><a href="#more">更多</a></li></ul></div></div></div></div></div></div><!--end导航-->

View Code

效果如图:

实际效果比这张效果图要好,已上传不知道怎么就变样了.

特别要注意的是锚链接的文本一定要和导航部分的一致.

下面是最关键的部分了,就是实现导航悬浮顶部:需添加下面代码:

//记住是在引入js文件的后面写<script type="text/javascript"> jQuery(function($) {$(document).ready( function() {  $('.navbar-wrapper').stickUp({parts: {  0:'home',  //这部分就是你锚链接的id  1:'yw',  2: 'sx',  3: 'wl',  4: 'hx',  5: 'sw',  6: 'zz',  7: 'dl',  8: 'yy',  9: 'more'  },itemClass: 'menuItem',itemHover: 'active',topMargin: 'auto'  });});  });</script>

这样就大功告成了!效果如图:

至此我们导航随滚动监听并保持悬浮顶部算是实现了

以下附上我的test源代码供大家参考:

Bootstrap导航悬浮顶部,stickUp _ JavaClub全栈架构师技术笔记

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content=""><meta name="author" content=""><title>导航固定顶部</title><link rel="stylesheet" href="css/bootstrap.min.css" /><link rel="stylesheet" href="stickup.css" /></head><body> <div class="carousel"><!--这里是导航--><div class="navbar-wrapper"><div class="container"><div class="navbarwrapper" ><div class="navbar navbar-inverse navbar-static-top"><div class="container"><div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li class="menuItem active"><a href="#home">首页</a></li><li><li class="menuItem"><a href="#yw">语文</a></li><li class="menuItem"><a href="#sx">数学</a></li><li class="menuItem"><a href="#wl">物理</a></li><li class="menuItem"><a href="#hx">化学</a></li><li class="menuItem"><a href="#sw">生物</a></li><li class="menuItem"><a href="#zz">政治</a></li><li class="menuItem"><a href="#dl">地理</a></li><li class="menuItem"><a href="#yy">英语</a></li><li class="menuItem"><a href="#more">更多</a></li></ul></div></div></div></div></div></div><!--end导航--><div id="contents" style="margin-left: 130px;margin-right: 130px;"><div id="home" class="row featurette container marketing"> <div class="row"><h1 style="margin-top: 100px;">我是home</h1><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p></div> </div><div id="yw" class="row featurette"><h1 style="margin-top: 100px;">我是语文</h1><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p></div><div id="sx" class="row featurette"> <h1 style="margin-top: 100px;">我是数学</h1><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p></div><div id="wl" class="row featurette"><h1 style="margin-top: 100px;">我是物理</h1><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p></div><div id="hx" class="row featurette"><h1 style="margin-top: 100px;">我是化学</h1><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p></div><div id="sw" class="row featurette"><h1 style="margin-top: 100px;">我是生物</h1><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p></div><div id="zz" class="row featurette"><h1 style="margin-top: 100px;">我是政治</h1><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p></div><div id="dl" class="row featurette"><h1 style="margin-top: 100px;">我是dl</h1><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p></div><div id="yy" class="row featurette"><h1 style="margin-top: 100px;">我是英语</h1><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p></div><div id="more" class="row featurette"><h1 style="margin-top: 100px;">我是更多</h1><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p><p>XXX表示，中方愿意同柬方继续保持高层往来，加强执政党交往，分享治国理政经验。中方支持洪森首相带领柬埔寨人民走符合本国国情的发展道路，支持柬方维护国家安全和稳定的努力，将继续为柬埔寨经济社会发展提供力所能及的帮助，推进农业、旅游等领域合作，实施好柬方水电、煤电、经济特区等项目，结合丝绸之路经济带和21世纪海上丝绸之路建设，带动基础设施互联互通。双方还要扩大人文合作，促进青年交流。</p></div></div></div><script type="text/javascript" src="js/jquery.js" ></script><script type="text/javascript" src="js/bootstrap.min.js" ></script><script type="text/javascript" src="js/stickUp.min.js" ></script><script type="text/javascript"> jQuery(function($) {$(document).ready( function() {  $('.navbar-wrapper').stickUp({parts: {  0:'home',  1:'yw',  2: 'sx',  3: 'wl',  4: 'hx',  5: 'sw',  6: 'zz',  7: 'dl',  8: 'yy',  9: 'more'  },itemClass: 'menuItem',itemHover: 'active',topMargin: 'auto'  });});  });</script></body></html>