Javascript 当我向上滚动时，导航栏必须保持在顶部位置，并且don'；t通过下列导航栏图像隐藏

我制作了一个代码，当我向下滚动时，将导航条粘贴在顶部位置。但现在的问题是，当我在编码时向下滚动顶部固定的集合。但是导航栏后面的图像隐藏了导航栏

滚动前

滚动后

让我们看看我的代码

       <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: '' });
                        }
            });
});

穆罕默德·费萨尔
欢迎来到主页

家
部门
应用
技术
关于我们
帮助






夏尼亚
查尼亚的气氛有点像佛罗伦萨和威尼斯

夏尼亚
查尼亚的气氛有点像佛罗伦萨和威尼斯

花
克里特岛科林巴里美丽的花朵

花
克里特岛科林巴里美丽的花朵

$（“文档”）.ready（函数（$）{
var offset=document.getElementById（'rows'）.getBoundingClientRect（）；
var topoffsets=offsets.top；
$（窗口）.bind（'scroll'，函数（）{
如果（$（窗口）.scrollTop（）>TopOffset）{
$（“#行”）.css（{top:0，位置：'fixed'}）；
}否则{
$（“#行”）.css（{顶部：''，位置：'}）；
}
});
});

您应该能够通过导航栏div上的z索引来解决此问题。将另一个类添加到导航div中

<div class="row navbar" 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>

---

您需要使用z索引向上移动导航栏层

.navbarclass {
z-index: 9999;
}

假设

div#rows

是这里的标题。您可以应用

z-index

。在处理页面上大量的z-index'd元素时，我不推荐使用

99999999

。您可能需要根据滑块的索引进行增加；检查滑块的

z-index

属性

---

尝试在导航栏div上使用具有高值的

z-index

css属性

代码

.navbar {
    z-index: 99999 !important;
}

---

谢谢@wmeade，我得到了一个输出。你能告诉我关于z指数的事吗？。。谢谢

z-index

控制页面上项目的堆叠（或分层）。把它想象成一堆纸。堆栈上最顶部的纸张具有较高的

z索引

，而较低的纸张具有较低的

z索引

。因此

z-index

越低，它堆叠的距离就越远。通过将导航栏设置为

99999

，您告诉它显示在页面上所有其他内容的顶部。现在，您不必使用这么高的数字，这只是确保它覆盖页面上的任何其他z索引属性。

#rows {
   z-index: 1004;
}

.navbar {
    z-index: 99999 !important;
}