内容下方的导航栏

Question

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

因此，这可行。

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


<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;