Bootstrap固定導航欄卡住

Question

我不確定該如何標題，但基本上發生了什麼是導航欄似乎正在離開自己的鬼影。它是固定的，並且功能完全相同，但是在向下滾動頁面後，當向後滾動時，它會在我向下滾動的頁面區域上留下圖像。屏幕截圖顯示了問題，但我會提到導航欄是白色的，所以這是一個不好的例子。當它具有顏色時，會在頁面上留下彩色條。

我在網頁設計方面都是全新的，所以在回答時請描述一下。謝謝！

我的Bootstrap 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); 
} 

Answer 1

第三個部分溢出隱患，應該是可見的。

.navbar { 
    overflow: visible; 
    margin-bottom: 0px; 
    color: transparent; 
    *position: relative; 
    *z-index: 2; 
}