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导航-->
效果如图:

实际效果比这张效果图要好,已上传不知道怎么就变样了.
特别要注意的是锚链接的文本一定要和导航部分的一致.
下面是最关键的部分了,就是实现导航悬浮顶部:需添加下面代码:
//记住是在引入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源代码供大家参考:
<!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>
Bootstrap导航悬浮顶部,stickUp的更多相关文章
- bootstrap悬浮顶部或者底部
这是bootstrap提供的样式,只需要引入bootstrap.css即可. 需要使用的class样式: navbar navbar-inverse navbar-inner navbar-fixed ...
- BootStrap导航栏的使用
默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...
- 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...
- Bootstrap导航
前面的话 导航对于一位前端人员来说并不陌生.可以说导航是一个网站重要的元素组件之一,便于用户查找网站所提供的各项功能服务.本文将详细介绍Bootstrap导航 基础样式 Bootstrap框架中制作导 ...
- Bootstrap 导航条理解
以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...
- Bootstrap导航栏实例讲解
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...
- bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现
bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...
- Bootstrap 导航 标题栏
Bootstrap 导航 标题栏: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式
Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...
随机推荐
- JS匿名函数&闭包
<html> <head> <title> test </title> </head> <body> <script ty ...
- Android:ViewPager详细解释(异步网络负载图片,有图片缓存,)并与导航点
android 应用.准则欢迎页面. 和图像旋转木马特征, 或者没有很多其他的内容显示在一个页面.以被划分成多个页面,在这一刻viewpager这是非常容易使用. 首先看下效果: 以下是一个样例.带异 ...
- Git 1.9.5.msysgit.1
Git 1.9.5.msysgit.1 发布,现已提供下载:https://github.com/msysgit/git/archive/v1.9.5.msysgit.1.zip. Git是一个开源的 ...
- 三个水杯 (bfs)
给出三个水杯,大小不一,并且只有最大的水杯的水是装满的,其余两个为空杯子.三个水杯之间相互倒水,并且水杯没有标识,只能根据给出的水杯体积来计算.现在要求你写出一个程序,使其输出使初始状态到达目标状态的 ...
- JavaScript之再谈回调与闭包
前些阵子写了几篇关于回调和闭包的博文,感觉自己都是似懂非懂,最近在项目中又碰到了类似的情况,故在此咱们来重弹js中的回调与闭包. 先说说回调: 百度百科: 回调函数就是一个通过函数指针调用的函数.如果 ...
- 基于Qt语音识别功能
基于在最近的研究Qt语音识别平台下.在此记录12 首先,语音识别做三件事 1.记录用户的语音文件到本地 2.将用户语音编码 使用flac或者speex进行编码 3.使用第三方语音识别API或者SDK进 ...
- [译文]c# /.Net 技巧: ToDictionary() and ToList()
前言: 有两个简单好用的LINQ扩展方法 ToDictionary() 和ToList(),你可能知道或不知道,但是它的的确确可以简化查询转化为集合的任务: 简介: LINQ和延迟执行 据你所认识的L ...
- ThinkPHP神秘应用架构扩展
ThinkPHP应用模式提供了机会,改变核心框架.它可以让你的应用程序,以适应环境和其他许多不同的需求. 每一个应用模式都有自己的模式定义文件,相对与ThinkPHP3.1版本号.ThinkPHP3. ...
- 进程切换switch_to宏第三个参数分析
进程切换一般都涉及三个进程,如进程a切换成进程b,b开始执行,但是当a恢复执行的时候往往是通过一个进程c,而不是进程b. 注意switch_to的调用: switch_to(prev,next,pre ...
- jquery_mobile.js+html5+css3打造手机平板等各种效果
http://www.w3school.com.cn/jquerymobile/jquerymobile_events_orientation.asp