内容下方的导航栏答案

【问题标题】：Navigation bar underneath content内容下方的导航栏
【发布时间】：2020-07-01 21:32:09
【问题描述】：

我正在使用本教程。所以我有一个带有图像链接的导航栏，当用户向下滚动时会隐藏。 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_hide_scroll

不过，这行得通。

但是，当我向下滚动时，body 中的图像会显示在导航栏上方。但是，正文中的文本不受影响。 所以我的问题是如何阻止这种情况发生。 另一件事是我如何使标题为橙色的“Sample Queen”显示在导航栏下方，因为它现在隐藏在它下方. 我希望内容从导航栏下方开始


<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="main.css">



<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script>
    /* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-190px";
  }
  prevScrollpos = currentScrollPos;
}
</script>
<body style="font-family:Century Gothic;">

<div id="navbar"  style="background-color:#f1f1f1;padding:15px;text-align: center;">
    <img src="/Index Files/insta.png" id="border" alt="sample Queen" style="width:100px;height:100px;">
    <img src="/Index Files/sample.png" id="border" alt="sample Queen" style="width:100px;height:100px;">
    <img src="/Index Files/asample.png" id="border" alt="sample Queen" style="width:100px;height:100px;">
    <img src="/Index Files/amazon.jpg" id="border" alt="sample Queen" style="width:100px;height:100px;">
    <img src="/Index Files/sample.jpg" id="border" alt="sample Queen" style="width:100px;height:100px;">
    <img src="/Index Files/sampleos.jpg" id="border" alt="sample Queen" style="width:100px;height:100px;">
</div>    
<h1><font color="orange">sample Queen</font>
</h1>
<h2>sample Queen is a small soap businets </h2>
</head>



<p>________</p>
<div class="slideshow-container">
  <div class="mySlides1" >
    <img src="/sample Queen/fm1.jpg" id="border" style="width:100%">
  </div>
  <div class="mySlides1">
    <img src="/sample Queen/fm2.jpg" id="border" style="width:100%">
  </div>
  <div class="mySlides1">
    <img src="/sample Queen/fm3.jpg" id="border" style="width:100%">
  </div>
  <div class="mySlides1">
    <img src="/sample Queen/fm4.jpg" id="border" style="width:100%">
  </div>
  <div class="mySlides1">
    <img src="/sample Queen/fm5.jpg" id="border" style="width:100%">
  </div>
  <div class="mySlides1">
    <img src="/sample Queen/fm6.jpg" id="border" style="width:100%">
  </div>
  <div class="mySlides1">
    <img src="/sample Queen/fm7.jpg" id="border" style="width:100%">
  </div>
  <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>
  <a class="next" onclick="plusSlides(1, 0)">&#10095;</a>
</div>

<p>________</p>
<div class="slideshow-container">
  <div class="mySlides2">
    <img src="/sample Queen/nd1.jpg" id="border" style="width:100%">
  </div>
  <div class="mySlides2">
    <img src="/sample Queen/nd2.jpg" id="border" style="width:100%">
  </div>
  <div class="mySlides2">
    <img src="/sample Queen/nd3.jpg" id="border" style="width:100%">
  </div>
  <div class="mySlides2">
    <img src="/sample Queen/nd4.jpg" id="border" style="width:100%">
  </div>
  <a class="prev" onclick="plusSlides(-1, 1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1, 1)">&#10095;</a>
</div>

<p>________</p>
<div class="slideshow-container">
    <div class="mySlides3">
      <img src="/sample Queen/gel1.png" id="border" style="width:100%">
    </div>
    <div class="mySlides3">
      <img src="/sample Queen/herbal1.png" id="border" style="width:100%">
    </div>
    <a class="prev" onclick="plusSlides(-1, 2)">&#10094;</a>
    <a class="next" onclick="plusSlides(1, 2)">&#10095;</a>
</div>

<div class="slideshow-container">

    <p>________</p>

    <div class="mySlides5">
      <img src="/sample Queen/hs.jpg" id="border" style="width:100%">
    </div>
</div>

<p>________</p>
<div class="slideshow-container">
    <div class="mySlides4">
      <img src="/sample Queen/hairmask1.png" id="border" style="width:100%">
    </div>
    <div class="mySlides4">
        <img src="/sample Queen/lip.png" id="border" style="width:100%">
      </div>

    <a class="prev" onclick="plusSlides(-1, 3)">&#10094;</a>
    <a class="next" onclick="plusSlides(1, 3)">&#10095;</a>
</div>

<p></p>


<div id="imgGrey"  style="background-color:#f1f1f1;padding:15px;text-align: center;">

    </div>
    </div> 



    <script>
   var slideIndex = [1,1,1,1,1];
    var slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4", "mySlides5"]
    showSlides(1, 0);
    showSlides(1, 1);
    showSlides(1, 2);
    showSlides(1, 3);
    showSlides(1, 4);


    function plusSlides(n, no) {
      showSlides(slideIndex[no] += n, no);
    }

    function showSlides(n, no) {
      var i;
      var x = document.getElementsByClassName(slideId[no]);
      if (n > x.length) {slideIndex[no] = 1}    
      if (n < 2) {slideIndex[no] = x.length}
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";  
      }
      x[slideIndex[no]-1].style.display = "block";  
    }
    </script>










    </body>



























</html>

 h1 {
    text-align: center;
    font-family: "Century Gothic";
    font-size:50px;
    font-weight: bold;

  }

  p {
    color: lightgrey;
    text-align: center;
    font-family: "Century Gothic";
    font-size:40px;

  }

  h2 {
    color: black;
    text-align: center;
    font-family: "Century Gothic";
    font-size:20px;
    padding-right: 15px;
    padding-left: 15px;


  }










    /* Now disable grayscale on hover */
    #border:hover {
    filter: none;
    -webkit-filter: grayscale(0);
    }


    #border {
    border-radius: 10px;
    text-align: center;
    vertical-align: middle;
    filter: gray; /* For IE6-9 */
    filter: grayscale(1); /* For Microsoft Edge and Firefox 35+ */
    -webkit-filter: grayscale(1); /* For Google Chrome, Safari 6+ & Opera 15+ */

    }











    /* Slideshow container */
    .slideshow-container {
      max-width: 500px;
      position: relative;
      margin: auto;
      padding-right: 15px;
    padding-left: 15px;
    }

    /* Next & previous buttons */
    .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 40%;
      width: auto;
      padding: 20px;
      color: lightgrey;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 10px 10px 0;
      user-select: none;
    }

    /* Position the "next button" to the right */
    .next {
      right: 0;
    }

    /* On hover, add a grey background color */
    .prev:hover, .next:hover {
      background-color: #f1f1f1;
      color: black;
    }








    /* width */
::-webkit-scrollbar {
    width: 20px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 0px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: lightgrey; 
    border-radius: 5px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: orange; 
  }







  #navbar {
    background-color: #333; /* Black background color */
    position: fixed; /* Make it stick/fixed */
    top: 0; /* Stay on top */
    width: 100%; /* Full width */
    transition: top 0.3s; /* Transition effect when sliding down (and up) */
  }

  /* Style the navbar links */
  #navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 15px;
    text-decoration: none;
  }

  #navbar a:hover {
    background-color: #ddd;
    color: black;
  }

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

请将以下几行添加到您的 CSS 中。

#navbar{
z-index: 1000;
}
body{
padding-top: 200px;
}

您可以根据导航栏的高度来控制 padding-top 的值。

【讨论】：

它成功了，感谢它。那么你能告诉我你做了什么吗？
您的导航栏被安排在低于内容的平面上。所以正文内容图像在导航栏上重叠。所以我将 z-index 属性设置为 1000。当我们使用导航栏时，我们应该考虑填充属性，以便内容在导航栏之后开始。导航栏位置属性是绝对的，因此无论导航栏元素如何，内容都将从正文的开头开始
请检查答案好吗？
完成。感谢您的帮助。