Javascript 引导程序在滚动时将导航栏固定在顶部
我有一个网页与导航栏使用引导。 我希望在向下滚动网页时导航栏固定在网页顶部 但我的导航栏无法在顶部修复。它变成了静态的 下面是我的代码。我该怎么做呢Javascript 引导程序在滚动时将导航栏固定在顶部,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,我有一个网页与导航栏使用引导。 我希望在向下滚动网页时导航栏固定在网页顶部 但我的导航栏无法在顶部修复。它变成了静态的 下面是我的代码。我该怎么做呢 <!DOCTYPE html> <html> <head> <title>About Me</title> <meta name="viewport" content="width=device-width, initial-scale=1.
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<script type="text/javascript">
/* affix the navbar after scroll below header */
$('#nav').affix({
offset: {
top: $('header').height()-$('#nav').height()
}
});
/* highlight the top nav as scrolling occurs */
$('body').scrollspy({ target: '#nav' })
/* smooth scrolling for scroll to top */
$('.scroll-top').click(function(){
$('body,html').animate({scrollTop:0},1000);
})
/* smooth scrolling for nav sections */
$('#nav .navbar-nav li>a').click(function(){
var link = $(this).attr('href');
var posi = $(link).offset().top+20;
$('body,html').animate({scrollTop:posi},700);
})
</script>
<style>
@import url(http://fonts.googleapis.com/css?family=Kreon:400,700);
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
-webkit-font-smoothing: antialiased;
font: normal 14px arial,sans-serif;
}
.row {
margin-left:0px;
margin-right:0px;
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 60px;
background-color: #f5f5f5;
margin-top:50px;
padding-top:20px;
padding-bottom:20px;
}
/* Custom page CSS
-------------------------------------------------- */
#wrap > .container {
padding: 60px 15px 0;
}
.container .credit {
margin: 20px 0;
}
#footer {
background-color:#414141;
}
#footer a {
color:#efefef;
}
h1,h2,h3,h4 {
font-family: 'Kreon', serif;
vertical-align:middle;
}
header {
background: #f16251;
height:550px;
color:#000000;
}
header h1,header h2,header h3 a,header a,header a:hover {
color:#101010;
font-weight:800;
text-decoration:none;
}
header h3 {
font-family: 'Kreon', serif;
background: #ffcc33;
padding:10px;
border-radius:3px;
font-size:34px;
padding:12px 10px 6px 10px;
}
header .dropdown-menu {
top:74px;
background: #ffcc33;
border-width:0;
}
h1 {
font-size:50px;
}
#nav {
width: 100%;
position:static;
top:-32px;
}
#nav.affix {
position: fixed;
top: 0;
z-index:10;
-webkit-transition: all .6s ease-in-out;
}
#footer > .container {
}
@media (min-width: 767px) {
.navbar-nav.nav-justified > li{
float:none;
}
}
.navbar-nav {
margin: 1px 1px;
}
/* customize nav style */
.navbar-custom {
background-color: #2e2e2e;
font-weight:700;
text-transform:uppercase;
border-width:0;
}
.navbar-custom .navbar-nav>li>a {
color: #ddd;
}
.navbar-custom .navbar-nav li>a:hover, .navbar-nav li .open, .navbar-custom .navbar-nav .active a {
background-color: #000;
}
.navbar-custom .dropdown-menu{
right:0;
}
.navbar-custom .navbar-nav>.dropdown>a .caret {
border-top-color: #999;
border-bottom-color: #999;
}
.navbar-collapse.in { /*3.0.2 bug workaround*/
overflow-y: visible;
}
.navbar-toggle {
outline:0;
}
.divider {
height:100px;
}
.panel {
border-width:0;
}
@media (max-width: 768px) {
header {
height: 95px;
}
}
#map-canvas {
width: 100%;
height: 300px;
margin: 0;
padding: 15px;
}
.scroll-top {
position:fixed;
bottom:0;
right:6%;
z-index:100;
background: #ffcc33;
font-size:24px;
border-top-left-radius:3px;
border-top-right-radius:3px;
}
.scroll-top a:link,.scroll-top a:visited {
color:#222;
}
section {
color: #ffffff;
min-height: 400px;
height: auto !important;
height: 100%;
padding-top:100px;
}
.bg-4 {
padding-top:30px;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(20,20,20,0.2)),to(rgba(255,255,255,0)), color-stop(1,#000));
}
</style>
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<header class="masthead">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h1><a href="#" title="Bootstrap Template">Testing Navigation</a>
<p class="lead">{Using Bootstrap}</p></h1>
</div>
</div>
</div>
</header>
<!-- Fixed navbar -->
<div class="navbar navbar-custom navbar-inverse navbar-static-top" id="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav nav-justified">
<li><a href="#">Home</a></li>
<li><a href="#section2">About</a></li>
<li><a href="#section3">My Skills</a></li>
<li class="active"><a href="#section1"><strong>Education</strong></a></li>
<li><a href="#section4">Portfolio</a></li>
<li><a href="#section5">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</div><!--/.navbar -->
<!-- Begin page content -->
<div class="divider" id="section1"></div>
<div class="container">
<div class="col-sm-10 col-sm-offset-1">
<div class="page-header text-center">
<h1>Testing</h1>
</div>
<p class="lead text-center">
Testing
</p>
<p class="text-center">
Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing
</p>
</div>
</div>
<!-- JavaScript placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
关于我
/*在标题下方滚动后粘贴导航栏*/
$（'#nav'）。粘贴({
偏移量：{
顶部：$（'header'）.height（）-$（'#nav'）.height（）
}
});
/*滚动时突出显示顶部导航*/
$（'body'）.scrollspy（{target:'#nav'}）
/*平滑滚动以滚动到顶部*/
$（'.scroll top'）。单击（函数（）{
$（'body，html'）.animate（{scrollTop:0}，1000）；
})
/*导航部分的平滑滚动*/
$（'#nav.navbar nav li>a'）。单击（函数（）{
var link=$（this.attr（'href'）；
var posi=$（link）.offset（）.top+20；
$（'body，html'）.animate（{scrollTop:posi}，700）；
})
@导入url(http://fonts.googleapis.com/css?family=Kreon:400,700);
html，
身体{
身高：100%；
/*html和body元素不能有任何填充或边距*/
-webkit字体平滑：抗锯齿；
字体：标准14px arial，无衬线；
}
.行{
左边距：0px；
右边距：0px；
}
/*页面内容下推页脚的包装器*/
#包裹{
最小高度：100%；
高度：自动！重要；
身高：100%；
/*按页脚高度负缩进页脚*/
保证金：0自动-60像素；
/*按页脚高度填充底部*/
填充：0 60px；
}
/*在此处设置页脚的固定高度*/
#页脚{
高度：60px；
背景色：#F5；
边缘顶部：50px；
填充顶部：20px；
垫底：20px；
}
/*自定义页面CSS
-------------------------------------------------- */
#包装>.container{
填充：60px 15px 0；
}
.集装箱.信用证{
利润率：20px0；
}
#页脚{
背景色：#4141；
}
#页脚a{
颜色：#efefef；
}
h1，h2，h3，h4{
字体系列：“Kreon”，衬线；
垂直对齐：中间对齐；
}
标题{
背景：#f16251；
高度：550px；
颜色：#000000；
}
收割台h1、收割台h2、收割台h3 a、收割台a、收割台a：悬停{
颜色：#101010；
字号：800；
文字装饰：无；
}
收割台h3{
字体系列：“Kreon”，衬线；
背景:#ffcc33；
填充：10px；
边界半径：3px；
字体大小：34px；
填充：12px 10px 6px 10px；
}
标题.下拉菜单{
顶部：74px；
背景:#ffcc33；
边框宽度：0；
}
h1{
字体大小：50px；
}
#导航{
宽度：100%；
位置：静态；
顶部：-32px；
}
#导航词缀{
位置：固定；
排名：0；
z指数：10；
-webkit过渡：所有.6s易于输入输出；
}
#页脚>.container{
}
@介质（最小宽度：767px）{
.navbar-nav.nav-justized>li{
浮动：无；
}
}
.导航栏导航{
保证金：1px 1px；
}
/*自定义导航样式*/
.导航栏海关{
背景色：#2e；
字号：700；
文本转换：大写；
边框宽度：0；
}
.navbar自定义.navbar导航>li>a{
颜色：#ddd；
}
.navbar-custom.navbar-nav-li>a:悬停、.navbar-nav-li.open、.navbar-custom.navbar-nav.active a{
背景色：#000；
}
.navbar自定义.下拉菜单{
右：0；
}
.navbar自定义.navbar导航>.dropdown>a.插入符号{
边框顶部颜色：#999；
边框底色：#999；
}
.navbar-collapse.in{/*3.0.2错误解决方法*/
溢出y：可见；
}
.导航栏切换{
大纲：0；
}
.分隔器{
高度：100px；
}
.小组{
边框宽度：0；
}
@介质（最大宽度：768px）{
标题{
高度：95px；
}
}
#地图画布{
宽度：100%；
高度：300px；
保证金：0；
填充：15px；
}
.滚动顶部{
位置：固定；
底部：0；
右：6%；
z指数：100；
背景:#ffcc33；
字体大小：24px；
边框左上半径：3px；
边框右上角半径：3px；
}
.滚动顶部a:链接，.滚动顶部a:已访问{
颜色：#222；
}
部分{
颜色：#ffffff；
最小高度：400px；
高度：自动！重要；
身高：100%；
填充顶部：100px；
}
.bg-4{
填充顶部：30px；
背景图像：-webkit渐变（线性，左上，左下，从（rgba（20,20,20,0.2））到（rgba（255255,0）），颜色停止（1,000））；
}
{使用引导程序}
测试
测试
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
// assets
var win = $(window);
var nav = $('#nav');
// this element fills the space normally occupied by the navigation bar when becomes fixed.
var navproxy = $('#navproxy');
var body = $('body');
var topdiv = $('#topdiv');
// put navbar at bottom, by setting height of topbanner
function setupTopdiv(event) {
topdiv.height(win.height() - nav.height());
navproxy.height(nav.outerHeight(true));
// trigger scroll
win.scroll();
};
// setup topdiv
setupTopdiv();
// On resize, setup toolbanner again
win.on('resize', setupTopdiv);
// On scroll, check for fix navbar
win.on('scroll', function () {
var bh = win.height();
var sh = nav.height();
var st = win.scrollTop();
if (st > bh - sh) {
nav.addClass("navbar-fixed-top");
// this element fills the space normally occupied by navbar
navproxy.removeClass("hidden");
} else {
nav.removeClass("navbar-fixed-top");
navproxy.addClass("hidden");
}
});