1
的图像隐藏我做一个代码在顶部位置贴导航栏时，我向下滚动。但现在的问题是，当我向下滚动固定在顶部的集合，因为我的代码。但是隐藏导航栏的导航栏后面的图片。当我向上滚动，导航栏必须坚持在顶部位置，不按照导航栏
前SCROLLING
后滚动 
让我们来看看我的代码
<div class="container">
<h1>Mohamed faisal</h1>
<p>Welcome to home page</p>
</div>
<div class="row" id="rows" >
<div class="col-md-2 home" align="center" >Home</div>
<div class="col-md-2 about" align="center">Department</div>
<div class="col-md-2 home" align="center">Applications</div>
<div class="col-md-2 about" align="center">Technologies</div>
<div class="col-md-2 home" align="center">About us</div>
<div class="col-md-2 about" align="center">Help</div>
</div>
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="f1.jpg" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="f2.jpg" alt="Chania" width="460" height="345">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="f3.jpg" alt="Flower" width="460" height="345">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="f4.jpg" alt="Flower" width="460" height="345">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
$("document").ready(function ($) {
var offsets = document.getElementById('rows').getBoundingClientRect();
var topoffsets = offsets.top;
$(window).bind('scroll', function() {
if ($(window).scrollTop() > topoffsets) {
$("#rows").css({ top: 0, position: 'fixed' });
} else {
$("#rows").css({ top: '', position: '' });
}
});
});
谢谢@wmeade，我得到的输出。你能告诉我有关的z-index？..谢谢 – user3075386
'Z-index'控制页面中的项目的堆叠（或分层）。松散地想像一堆纸。最顶端的纸张在堆栈上具有高'的z index'，而下部片材具有较低的'的z index'。所以'z-index'越低，它将堆叠的“越远”。通过导览列设置为'99999'，你告诉它，以显示一切在页面上的其他人之上。现在，您不必使用如此之高的数字，这只是确保它会覆盖页面上的任何其他z-索引属性。 – wmeade