动态附加Navbar

时间:2016-04-28 15:45:15

标签: javascript jquery html css twitter-bootstrap

所以我正在开发一个网页,我查找了如何制作一个动态附加的导航栏。换句话说,导航栏固定在标题图像的底部,但在用户向下滚过标题时将其自身固定到顶部。我看到的大部分内容令人困惑,但我对需要完成的工作有了一个大概的了解。我做了一个快速的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>

0 个答案:

没有答案