Question

我在一页上有两个导航栏。一个是图像上方的导航栏，另一个是下拉导航栏。调整页面大小时，我希望图像上方的导航栏消失而下拉菜单出现。但是，它最终以导航栏位于下拉导航栏顶部的图像上方。不知道如何改变。

我创建了以下代码段来展示我的问题：

/* dropdown_navbar start */
// When the user scrolls down 134px from the top of the document, slide down the navbar
window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 134 || document.documentElement.scrollTop > 134) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
}
/* dropdown_navbar end */




function myFunction() {
  var x = document.getElementById("navbar");
  if (x.className === "navbar-right") {
    x.className += " responsive";
  } else {
    x.className = "navbar-right";
  }
}

/*DROPDOWN NAV */
#myTopnav .icon {
  display: none;
}

#navbar {
  background-color: rgb(23, 23, 23);
  position: fixed;
  top: -50px;
  width: 100%;
  display: block;
  transition: top 0.3s;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

/*  .navbar-right { 
      float: right
    } */

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

#navbar a.active { /* fix as this is not working */
  background-color: rgb(40, 129, 202);
  color: #ddd;
}


/* RESPONSIVE FOR NAVBAR START */
@media screen and (max-width: 600px) {
  #navbar a:not(:first-child) {
    display: none;
  }
  #navbar a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  #navbar.responsive {
    position: relative;
  }
  #navbar.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  #navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
/*DROPDOWN NAV */


/*NAVBAR OVER IMAGE*/

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
  }
  
  * {
    box-sizing: border-box;
  }
  
  .topnav a.active {
    background-color: rgb(40, 129, 202);
    color: white;
  } 
  
  .bg-img {
    /* The image used */
    background-image: url("../images/numbers-01.jpg");
    /*min-height: 380px;*/
    min-height: 480px;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    /* Needed to position the navbar */
    position: relative;
  }
  
  /* Position the navbar container inside the image */
  .nav-container-image {
    position: absolute;
    margin: 90px;
    width: auto;
  }
  
  /* The navbar */
  .topnav {
    overflow: hidden; /* delete to remove background */
    background-color: rgb(23, 23, 23);
  }
  
  /* Navbar links */
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
 

  @media screen and (max-width: 600px) {
    .nav-container-image { 
      width: 200px; /* change width on navbar over image */
    }
  }
/*NAVBAr OVER IMAGE*/

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="dropdown_navbar.css">
        <link rel="stylesheet" type="text/css" href="navbar_over_image.css">
  </head>

  <body>
    <div class="bg-img">
      <div class="nav-container-image">
        <div class="topnav">
          <a class="active" href="#home">Homes</a>
          <a href="#services">Services</a>
          <a href="#portfolio">Portfolio</a>
          <a href="#contact">Contact</a>
          <a href="#blog">Blog</a>
        </div>
      </div>
    </div>

    <div class="container">
      <div id="navbar" style="padding: 0px 30px 0px 30px">
  <!--<a href="#default" class="logo">CompanyLogo</a> -->
        <div class="navbar-right" id="myTopnav">
          <a class="active" href="#home">Home</a>
          <a href="#services">Services</a>
          <a href="#portfolio">Portfolio</a>
          <a href="#contact">Contact</a>
          <a href="#blog">Blog</a>

          <a href="javascript:void(0);" class="icon" onclick="myFunction()">
            <i class="fa fa-bars"></i>
          </a>
        </div>
      </div>  
    </div>
    
    <div style="padding:5px 15px 5000px">
      <p><b>This example demonstrates how to slide down a navbar when the user starts to scroll the page.</b></p>
      <p>Scroll down this frame to see the effect!</p>
      <p>Scroll to the top to hide the navbar.</p>
      <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

    <script src="myscripts.js"></script>
  </body>
</html>

Answer 1

类似的事情应该可以完成：

If Already Purchased END <br/>
ELSE IF In Wish List END <br/>
ELSE IF In Stock END<br/>
WHERE PRODUCT_ID = 'PRODUCT_1'

如何在同一页面上有两个导航栏

1 个答案: