Question

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

在滚动之前

滚动后

让我们看看我的代码

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

Answer 1

您应该能够在导航栏div上使用z-index修复此问题。将另一个类添加到导航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>

然后将类添加到css中，z-index为99999。

.navbar {
    z-index: 99999;
}

Answer 2

您需要使用z-index来增加导航栏图层。

.navbarclass {
z-index: 9999;
}

Answer 3

假设div#rows是您的标题。您可以申请z-index。在页面上处理大量z-index'd元素时，我不建议99999999的想法。 你可能需要根据滑块的索引增加;检查滑块的z-index属性

#rows {
   z-index: 1004;
}

Answer 4

尝试在导航栏div上使用值较高的z-index css属性。

<强>代码

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

当我向上滚动时，导航栏必须坚持在顶部位置，不要通过跟随导航栏的图像隐藏

4 个答案: