1

我不确定如何命名这个，但基本上正在发生的事情是导航栏似乎正在留下自己的幽灵形象。它是固定的并且功能完美，但是在页面上向下滚动后，当我向上滚动时，它会在我向下滚动到的页面区域上留下图像。屏幕截图显示了问题，尽管我会提到导航栏是白色的，所以这是一个糟糕的例子。当它有颜色时，它会在页面上留下一个彩色条。

我在各个方面都是网页设计的新手，所以请在回答时进行描述。谢谢！

在此处输入图像描述

我的引导 CSS：

.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
  width: 940px;
}
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
  width: 940px;

}
.navbar {
  overflow: hidden;
  margin-bottom: 0px;
  color: transparent;
  *position: relative;
  *z-index: 2;
}
 .navbar-inner {
  min-height: 50px;
 /* padding-left: 20px; */
  padding-right: 20px;
  background-color: #ffffff;
 /* background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
  background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
     background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
  background-repeat: repeat-x; */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
   border: 1px solid #ed4542;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);*/
}
.navbar .container {
  width: auto;
}
.nav-collapse.collapse {
  height: auto;
}
.navbar .brand {
  float: left;
  display: block;
  padding: 20px 20px 20px;
  margin-left: -20px;
  font-size: 20px;
  font-weight: 200;
  color: #555555;
  text-shadow: 0 1px 0 #ffffff;
}
.navbar .brand:hover {
  text-decoration: none;
}
.navbar-text {
   margin-bottom: 0;
 line-height: 30px;
 }
 .navbar-link {
  color: #ed4542;
}
.navbar-link:hover {
  color: #ed4542;
}

.navbar-form {
  margin-bottom: 0;
  *zoom: 1;
}
.navbar-form:before,
.navbar-form:after {
  display: table;
  content: "";
  line-height: 0;
}
.navbar-form:after {
  clear: both;
}
.navbar-form:before,
.navbar-form:after {
  display: table;
 content: "";
  line-height: 0;
 }
.navbar-form:after {
  clear: both;
}
.navbar-form input,
.navbar-form select,
.navbar-form .radio,
.navbar-form .checkbox {
 margin-top: 15px;
 }
 .navbar-form input,
 .navbar-form select,
 .navbar-form .btn {
   display: inline-block;
  margin-bottom: 0;
}
 .navbar-form input[type="image"],
 .navbar-form input[type="checkbox"],
 .navbar-form input[type="radio"] {
  margin-top: 3px;
}
.navbar-form .input-append,
.navbar-form .input-prepend {
  margin-top: 6px;
  white-space: nowrap;
}
.navbar-form .input-append input,
.navbar-form .input-prepend input {
 margin-top: 0;
}

.navbar-static-top {
  position: static;
  width: 100%;
  margin-bottom: 0;
}
.navbar-static-top .navbar-inner {
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
  border-radius: 0;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
  margin-bottom: 0;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner,
.navbar-static-top .navbar-inner {
  border: 0;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
  padding-left: 0;
  padding-right: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.navbar-static-top .container,
.navbar-fixed-top .container,
 .navbar-fixed-bottom .container {
  width: 1200px;
 }
.navbar-fixed-top {
  top: 0;
}
.navbar-fixed-top .navbar-inner,
.navbar-static-top .navbar-inner {
 /* -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1);
  -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1);
   box-shadow: inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1); */
}
 .navbar-fixed-bottom {
   bottom: 0;
 }
 .navbar-fixed-bottom .navbar-inner {
 /* -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1);
   -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1);
   box-shadow: inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1); */
 }
.navbar .nav {
   position: relative;
  right: 0;
    display: block;
  float: right;
   margin: 0;
 }    
 .navbar .nav.pull-right {
  float: right;
}
.navbar .nav > li {
   float: left;
  margin-top: 10px;
}
.navbar .nav > li > a {
  float: none;
   vertical-align: middle;
  padding: 20px 10px 20px;
  color: #555555;
   font-family: 'Lora', serif;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 0 #ffffff;  
}

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  background-color: #transparent;
  color: #7095eb;
  text-decoration: none;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
  color: #ed2b28;
  text-decoration: none;
  background-color: #transparent;
  -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
  -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
 }
4

1 回答 1

1

从顶部算起的第三部分隐藏了溢出，应该是可见的。

.navbar {
  overflow: visible;
  margin-bottom: 0px;
  color: transparent;
  *position: relative;
  *z-index: 2;
}
于 2013-10-12T13:02:44.133 回答