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的更多相关文章

  1. bootstrap悬浮顶部或者底部

    这是bootstrap提供的样式,只需要引入bootstrap.css即可. 需要使用的class样式: navbar navbar-inverse navbar-inner navbar-fixed ...

  2. BootStrap导航栏的使用

    默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...

  3. 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏

    有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...

  4. Bootstrap导航

    前面的话 导航对于一位前端人员来说并不陌生.可以说导航是一个网站重要的元素组件之一,便于用户查找网站所提供的各项功能服务.本文将详细介绍Bootstrap导航 基础样式 Bootstrap框架中制作导 ...

  5. Bootstrap 导航条理解

    以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...

  6. Bootstrap导航栏实例讲解

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

  7. bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现

    bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...

  8. Bootstrap 导航 标题栏

    Bootstrap 导航 标题栏: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  9. Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式

    Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...

随机推荐

  1. Display Database Image using MS SQL Server 2008 Reporting Services

    原文 Display Database Image using MS SQL Server 2008 Reporting Services With the new release of MS SQL ...

  2. linux tar.gz zip 减压 压缩命令

    http://apps.hi.baidu.com/share/detail/37384818 download ADT link http://dl.google.com/android/ADT-0. ...

  3. URAL 1727. Znaika&#39;s Magic Numbers(数学 vector)

    主题链接:http://acm.timus.ru/problem.aspx?space=1&num=1727 1727. Znaika's Magic Numbers Time limit: ...

  4. cocos2d-x注意事项(十)Lua发展飞机战争-4-创建主角

    二战中被称为二战飞机飞机,当然,以飞机作业.这是一个游戏,我们必须加入一个飞机--这是我们的英雄. 首先创建一个层(PlaneLayer)要显示飞机.然后,create飞机初始化方法 module(& ...

  5. 首先运行application的name相应的类或做activity中间name相应的类?

    今天找到该程序条目中找到以下两个条件name我写了一个测试程序,一般如以下: 看mainfest.xml <application android:allowBackup="true& ...

  6. linux_之sed用法

    sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以 将数据行进行替换.删除.新增.选取等特定工作,下面先了解一下sed的用法sed命令行格式为:         sed ...

  7. 打破了中国电信华为无线路由猫(HG522-C)自己主动拨号+任意数量的计算机+iTV

    中国电信路由猫去势后总是我的好E家里到处都是卖包(够坏垄断市场.有霸王条款多,例如,他们必须用自己的手机,同时计算机的最大数量的在线等),我曾破获另一家中国电信路由猫.非常easy,由U它磁盘恢复默认 ...

  8. idea类似eclipse鼠标技巧java api信息

    版权声明:本文博客原创文章,博客,未经同意,不得转载.

  9. 第一个JavaWeb程序

    转载 第一个JavaWeb程序 JavaWeb学习总结第二篇—第一个JavaWeb程序 最近我在学院工作室学习并加入到研究生的项目中,在学长学姐的带领下,进入项目实践中,为该项目实现一个框架(用已有框 ...

  10. 在遍历中使用 iterator/reverse_iterator 进行 Erase 的使用方法

    在遍历中使用 iterator/reverse_iterator 进行 Erase 的使用方法 罗朝辉 (http://blog.csdn.net/kesalin/) 本文遵循"署名-非商业 ...