所以我正在开发一个网页，我查找了如何制作一个动态附加的导航栏。换句话说，导航栏固定在标题图像的底部，但在用户向下滚过标题时将其自身固定到顶部。我看到的大部分内容令人困惑，但我对需要完成的工作有了一个大概的了解。我做了一个快速的4行JQuery代码，将data-offset-top值设置为包含头的div的outerHeight。它奏效了，我对自己的所作所为感到满意。即使屏幕尺寸按比例放大或缩小，导航栏也会粘在标题的底部并切换。然后我开始添加内容......现在它将data-offset-top设置为23，并且是JQuery的新手，我无法弄清楚为什么会这样做。
代码：
$(document).ready(function(){
var affixHeight = $(".header").outerHeight(true);
$("#affixNav").attr("data-offset-top", affixHeight);
});/*Primary Background*/
body{
background-image: url("AtABackgroundImage.jpg");
background-position: center;
background-repeat: repeat-y;
background-attachment: fixed;
background-size: 100% 100%;
}
.horizon{
margin-top: 5px;
margin-bottom: 15px;
border-top: 2px outset #8c8c8c;
margin-right: 50px;
}
/*div{
border: 5px solid red;
}*/
/*Navbar/Header*/
.navElement{
width: 100px;
text-align: center;
height: auto;
padding-left: 5px;
padding-right: 5px;
padding-top: 1px;
padding-bottom: 1px;
margin-right: 10px;
}
.navbar-inverse{
background-image: url("AtABackgroundImage.jpg");
background-size: 100% 100%;
border-width: 0;
}
.hovering:hover{
background-color: #1f1f14;
border-radius: 15px;
padding: 0px;
}
.button-images{
text-align: center;
height: auto;
width: 100%;
}
.header{
position: relative;
width: 100%;
height: 30%;
overflow: none;
margin-left: 0;
margin-right: 0;
padding: 0;
border-bottom: 3px ridge #333333;
}
.headerimg{
margin-top: -125px;
width: 100%;
overflow: none;
}
.affix {
top: 0;
width: 100%;
}
/*Index Content*/
.row{
margin-left: 0;
margin-right: 0;
}
.content-area{
}
.logoArea{
text-align: center;
padding-left: 0px;
}
.logoImg{
width: 100%;
height: auto;
}
.indexTextImg{
text-align: left;
height: 55px;
width: 225px;
}
.index-text{
padding-left: 20px;
color: #e6e6e6;
font-size: 13pt;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="atamain.css">
<link rel="icon"
type="image/ico"
href="favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="jquery-1.12.3.min.js"></script>
<script src="atamain.js"></script>
<title>Ashes to Ashes</title>
</head>
<body>
<div class="header container-fluid">
<img class="headerimg" src="header\AtAWallpaper.jpg">
</div>
<nav class="navbar-inverse navbar" data-spy="affix" id="affixNav">
<div class="container-fluid nav-containment">
<div class="navbar-header active-page">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="hovering navElement"><a href="index.html"><img class="button-images" src="NavButtonAssets\HOME2.png"></a></li>
<li class="hovering navElement"><a href="news.html"><img class="button-images" src="NavButtonAssets\NEWS2.png"></a></li>
<li class="dropdown hovering navElement">
<a class="dropdown-toggle" data-toggle="dropdown"><img class="button-images" src="NavButtonAssets\ABOUT2.png"></span></a>
<ul class="dropdown-menu">
<li><a href="game.html">The Game</a></li>
<li><a href="server.html">The Server</a></li>
<li><a href="factions.html">Factions</a></li>
</ul>
<li class="hovering navElement"><a href="media.html"><img class="button-images" src="NavButtonAssets\MEDIA2.png"></a></li>
<li class="hovering navElement"><a href="application.html"><img class="button-images" src="NavButtonAssets\APPLY2.png"></a></li>
</ul>
</div>
</div>
</nav>
<div class="content-area">
<div class=" row">
<div class="col-sm-5 logoArea"><img class="logoImg" src="NavBarLogo\AshesWebNavBarLogo.png" alt="AtA Logo"></div>
<div class="col-sm-7 welcomeTextArea">
<img class="indexTextImg" src="NavButtonAssets\WELCOME.png">
<hr class="horizon">
<p class="index-text">Placeholder text is here to test if the page works... it will eventually be changed to something actually useful and meaningful. For now... it's just here.</p>
</div>
</div>
</div>
</body>
</html>