滚动到位置时，使导航条保持固定

Question

I am trying to make my website's navigation bar stick to the top of the page after scrolling to it along with the header image. 我试图将我的网站的导航栏与标题图像一起滚动到页面顶部。 So far the code I have is: 到目前为止，我拥有的代码是：

<html>
<head>
<link href="C:\Users\Karl\Desktop\New Bistro\menu_assets\styles.css" rel="stylesheet" type="text/css">
<style>
.header{
 height:70%;
 background-image:url('http://s22.postimg.org/4eags0oep/header.png');
 background-size: cover;
 width:100%;
}
.nav{
 height:8%;
 width:100%;
}
.body{
 height:100%;
 background-image:url('http://upload.wikimedia.org/wikipedia/commons/6/60/Solna_Brick_wall_Silesian_bond_variation1.jpg');
}
.logo {
 background-image:url('Title.png');
 margin-left:auto;
 margin-right:auto;
 height:140px;
 width:554px;
 right:35%;
 position:fixed;  
 z-index:9999 
}
</style>
</head>
<body background="http://htmlgiant.com/wp-content/uploads/2010/09/A-grey.jpeg" style="margin: 0; padding: 0;">

<div class="header">
<a href="#Home"><div class="logo"></div></a>
</div>

<div class="nav">
<div id='cssmenu'>
<ul>
   <li><a href='http://www.132glenbistro.com/'><span>Home</span></a></li>
   <li><a href='http://www.132glenbistro.com/'><span>Menu</span></a></li>
   <li><a href='http://www.132glenbistro.com/'><span>Gallery</span></a></li>
   <li class='last'><a href='http://www.132glenbistro.com/'><span>Contact</span></a></li>
</ul>
</div>
</div>

<div class="body">
<div align="center">
<table width="70%" style="height: 200%;" cellpadding="10" cellspacing="0" border="1">
<tr>
<td colspan="2" style="height: 100px;" bgcolor="#ffffff">
</td></tr></table>
</div>
</div>

</body>
</html>

My css file is: 我的css文件是：

#cssmenu ul {
  margin: 0;
  padding: 0;
}
#cssmenu li {
  margin: 0;
  padding: 0;
}
#cssmenu a {
  margin: 0;
  padding: 0;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu a {
  text-decoration: none;
}
#cssmenu {
  height: 70px;
  background-color: #232323;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
  width: auto;
}
#cssmenu > ul > li {
  float: left;
  margin-left: 15px;
  position: relative;
}
#cssmenu > ul > li > a {
  color: #a0a0a0;
  font-family: Verdana, 'Lucida Grande';
  font-size: 15px;
  line-height: 70px;
  padding: 15px 20px;
  -webkit-transition: color .15s;
  -moz-transition: color .15s;
  -o-transition: color .15s;
  transition: color .15s;
}
#cssmenu > ul > li > a:hover {
  color: #ffffff;
}
#cssmenu > ul > li > ul {
  opacity: 0;
  visibility: hidden;
  padding: 16px 0 20px 0;
  background-color: #fafafa;
  text-align: left;
  position: absolute;
  top: 55px;
  left: 50%;
  margin-left: -90px;
  width: 180px;
  -webkit-transition: all .3s .1s;
  -moz-transition: all .3s .1s;
  -o-transition: all .3s .1s;
  transition: all .3s .1s;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu > ul > li:hover > ul {
  opacity: 1;
  top: 65px;
  visibility: visible;
}
#cssmenu > ul > li > ul:before {
  content: '';
  display: block;
  border-color: transparent transparent #fafafa transparent;
  border-style: solid;
  border-width: 10px;
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -10px;
}
#cssmenu > ul ul > li {
  position: relative;
}
#cssmenu ul ul a {
  color: #323232;
  font-family: Verdana, 'Lucida Grande';
  font-size: 13px;
  background-color: #fafafa;
  padding: 5px 8px 7px 16px;
  display: block;
  -webkit-transition: background-color 0.1s;
  -moz-transition: background-color 0.1s;
  -o-transition: background-color 0.1s;
  transition: background-color 0.1s;
}
#cssmenu ul ul a:hover {
  background-color: #f0f0f0;
}
#cssmenu ul ul ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: -16px;
  left: 206px;
  padding: 16px 0 20px 0;
  background-color: #fafafa;
  text-align: left;
  width: 180px;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu ul ul > li:hover > ul {
  opacity: 1;
  left: 190px;
  visibility: visible;
}
#cssmenu ul ul a:hover {
  background-color: #cc2c24;
  color: #f0f0f0;
}

I have tried using javascript to do this to no avail. 我尝试使用javascript做到这一点无济于事。 I am new to javascript programming in general any help would be appreciated. 我是javascript编程的新手，将不胜感激。

Answer 1

http://getbootstrap.com/javascript/#affix http://getbootstrap.com/javascript/#affix

Bootstrap provides this feature called "Affix". Bootstrap提供了称为“ Affix”的功能。 Even if you only use this aspect I think it would be much more beneficial to use Bootstrap than try to do it yourself. 即使您只使用此方面，我认为使用Bootstrap比尝试自己做会更有益。 Or you can look at the source to get an idea of how they do it. 或者，您可以查看源代码以了解他们的操作方式。

Either way without seeing your attempts I don't see how we're supposed to help you. 两种方式都没有看到您的尝试，我看不到我们应该如何帮助您。

滚动到位置时，使导航条保持固定

问题描述

1 个解决方案

解决方案1
0 2013-12-27 19:09:24

滚动到位置时，使导航条保持固定

问题描述

1 个解决方案

解决方案1 0 2013-12-27 19:09:24

解决方案1
0 2013-12-27 19:09:24