javascript - 固定导航隐藏在谷歌地图下并在滚动后单击时移动

标签 javascript html css

我已将谷歌地图放在页面底部的最后一个 div 中。当我向下滚动到这个 div 时，谷歌地图覆盖在导航栏的顶部，即使它没有对任何其他元素执行此操作。滚动到页面底部时，如何防止 Google map 覆盖导航栏？

导航栏也是固定的，但是我遇到了一个问题，如果您在向下滚动页面后单击下拉菜单，它将移回页面顶部，将用户留在他们滚动到的位置没有可用的导航栏，因此为了访问导航栏，您必须一直滚动回到页面顶部

 body {
   position: relative;
   height: 100vh;
   margin: 0px;
   background-color: #f4f4f4;
   color: #444;
   font: .9em Arial, sans-serif;
 }

 .topnav {
   overflow: hidden;
   background-color: white;
   position: fixed;
   top: 0;
   width: 100%;
   display: flex;
   justify-content: space-between;
 }

 .topnav a {
   float: left;
   display: block;
   color: #185b9b;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 17px;
 }

 .topnav a:hover {
   background-color: #efefef;
   color: #2672b2;
 }

 .active {
   background-color: white;
   color: white;
 }

 .topnav .icon {
   display: none;
 }

 .menu-icons {
   display: flex;
   height: 48px;
 }

 @media screen and (max-width: 600px) {
   .topnav a:not(:first-child) {
     display: none;
   }
   .topnav a.icon {
     float: right;
     display: block;
   }
 }

 @media screen and (max-width: 600px) {
   .topnav.responsive {
     position: relative;
   }
   .topnav.responsive a {
     float: none;
     display: block;
     text-align: left;
   }
 }

 .main {
   padding: 16px;
   margin-top: 30px;
   height: 100%;
 }

 .logo {
   max-height: 15px;
   max-width: 160px;
 }

 .header {
   height: 200px;
   padding: 10px 0px 10px 0px;
 }

 .wrapper {
   box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
   border-radius: 5px;
   overflow: hidden;
   margin-bottom: 20px;
   background-color: white;
 }

 #one {
   float: left;
   margin: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 130px;
   width: 200px;
   height: 100%;
 }

 #one img {
   max-height: 25px;
   max-width: 160px;
 }

 #map {
   float: left;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 750px;
   width: 50%;
   height: 100%;
 }

 

 #two {
   overflow: hidden;
   margin: 10px;
   min-height: 130px;
 }

 @media screen and (max-width: 910px) {
   #one {
     float: none;
     margin-right: 10;
     width: auto;
     border: 0;
   }
  #map {
     float: none;
     margin-right: 10;
     width: auto;
     border: 0;
   }
 }

.container {
   max-width: 800px;
   height: 600px;
   margin: 40px auto;
   padding: 0px 40px 40px 40px;
 }

 h1 {
   text-align: center;
   letter-spacing: 1px;
   font-size: 45px;
   margin: 0px 0px 20px 0px;
   color: #185b9b;
 }

 .input,
 .msg .area {
   width: 100%;
   padding: 20px;
   box-sizing: border-box;
   margin-bottom: 25px;
   border: 2px solid #e9eaea;
   font-size: 14px;
   border-radius: 5px;
   outline: none;
   transform: all 0.5s ease;
 }

 .login .input {
   width: 48%;
   float: left;
   margin-right: 4%;
 }

 .login .input:last-child {
   margin-right: 0;
 }

 .enter .btn2 {
   width: 48%;
   float: left;
   margin-right: 4%;
 }

 .enter .btn2:last-child {
   margin-right: 0;
 }
 .msg .area {
   height: 200px;
 }

 .btn {
   
   background: #185b9b;
   height: 50px;
   line-height: 50px;
   text-align: center;
   border-radius: 5px;
   margin: 0 auto;
   margin-bottom: 25px;
   color: #fff;
   text-transform: uppercase;
   cursor: pointer;
 }

.btn2 {
  
   background: #185b9b;
   height: 50px;
   line-height: 50px;
   text-align: center;
   border-radius: 5px;
   margin: 0 auto;
   color: #fff;
   text-transform: uppercase;
   cursor: pointer;
 }
 .input:focus,
 .msg .area:focus {
   border: 2px solid #486255;
 }

 ::-webkit-input-placeholder {
   font-family: 'roboto';
 }
 
 
<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

  </head>

  <body>

    <div class="topnav" id="myTopnav">
      <div>
        <a href="#home" class="active"><img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1200px-Google_2015_logo.svg.png" /></a>
        <a href="#contact">Contact Us</a>
        <a href="#download">Download</a>
      </div>
      <div class="menu-icons">
        <a href="tel:800-922-0204" class="icon">
<i class="fas fa-phone"></i>
  </a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
      </div>

    </div>

    <div class="main">

      <div class="header">
        <h2>LOREM IPSUM</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere
          ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..
        </p>

        <p>
          Fixed bar The Worl'd Finest?
        </p>
      </div>


      <div class="wrapper">
        <div id="one">

          <img src="http://jsfiddle.net/img/logo.png" />
        </div>
        <div id="two">
          <h2>LOREM IPSUM</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
            posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
          <br>
          <p>
            <p>
              https://google.com/
            </p>
        </div>
      </div>

      <div class="wrapper">
        <div id="one">

          <img src="http://jsfiddle.net/img/logo.png" />
        </div>
        <div id="two">
          <h2>LOREM IPSUM</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
            posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
          <br>
          <p>
            <p>
              https://google.com/
            </p>
        </div>
      </div>

      <div class="wrapper">
        <div id="one">

          <img src="http://jsfiddle.net/img/logo.png" />
        </div>
        <div id="two">
          <h2>LOREM IPSUM</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
            posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
          <br>
          <p>
            <p>
              https://google.com/
            </p>
        </div>
      </div>

      <div class="wrapper">
        <div id="one">

          <img src="http://jsfiddle.net/img/logo.png" />
        </div>
        <div id="two">
          <h2>LOREM IPSUM</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
            posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
          <br>
          <p>
            <p>
              https://google.com/
            </p>
        </div>
      </div>




      <div class="wrapper">
       <div id="map" class="float"></div>
        <div id="two">
          <div class="container">
            <h1>Let's work together.</h1>

            <div class="login">
              <input type="text" placeholder="Your Name" class="input">
              <input type="text" placeholder="Your Email Address" class="input">
            </div>

            <div class="subject">
              <input type="text" placeholder="Subject" class="input">
            </div>

            <div class="msg">
              <textarea class="area" placeholder="Leave a Message"></textarea>
            </div>

            <div class="btn">Send Message</div>

            <div class="enter">
              <div class="btn2">Call 1-800-922-0204</div>
              <div class="btn2"> Download PDF</div>
            </div>
          </div>
        </div>
      </div>


      <footer>
        <p>Copyright © 2019 Logo Name, LLC. All Rights Reserved</p>
        <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
      </footer>

    </div>



    <script>
      function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
          x.className += " responsive";
        } else {
          x.className = "topnav";
        }
      }
function initMap() {
    var location = {
      lat: -25.363,
      lng: 131.044
    };
    var map = new google.maps.Map(document.getElementById("map"), {
      Zoom: 4,
      center: location
    });
  }

</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBYzXj5wF4L6mChyyc5xwfb2QT1QEZ9VN8&callback=initMap">


</script>


  </body>

</html>

最佳答案

我在 .topnav 和 #map 上更新了 CSS。现在 map 不会在导航栏上重叠。

body {
   position: relative;
   height: 100vh;
   margin: 0px;
   background-color: #f4f4f4;
   color: #444;
   font: .9em Arial, sans-serif;
 }

 .topnav {
   overflow: hidden;
   background-color: white;
   position: fixed;
   top: 0;
   width: 100%;
   display: flex;
   justify-content: space-between;
   z-index: 2;
 }

 .topnav a {
   float: left;
   display: block;
   color: #185b9b;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 17px;
 }

 .topnav a:hover {
   background-color: #efefef;
   color: #2672b2;
 }

 .active {
   background-color: white;
   color: white;
 }

 .topnav .icon {
   display: none;
 }

 .menu-icons {
   display: flex;
   height: 48px;
 }

 @media screen and (max-width: 600px) {
   .topnav a:not(:first-child) {
     display: none;
   }
   .topnav a.icon {
     float: right;
     display: block;
   }
 }

 @media screen and (max-width: 600px) {
   .topnav.responsive {
     position: relative;
   }
   .topnav.responsive a {
     float: none;
     display: block;
     text-align: left;
   }
 }

 .main {
   padding: 16px;
   margin-top: 30px;
   height: 100%;
 }

 .logo {
   max-height: 15px;
   max-width: 160px;
 }

 .header {
   height: 200px;
   padding: 10px 0px 10px 0px;
 }

 .wrapper {
   box-shadow: 0 5px 20px rgba(0, 0, 0, .25);
   border-radius: 5px;
   overflow: hidden;
   margin-bottom: 20px;
   background-color: white;
 }

 #one {
   float: left;
   margin: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 130px;
   width: 200px;
   height: 100%;
 }

 #one img {
   max-height: 25px;
   max-width: 160px;
 }

 #map {
   float: left;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 750px;
   width: 50%;
   height: 100%;
   z-index: 1;
 }

 

 #two {
   overflow: hidden;
   margin: 10px;
   min-height: 130px;
 }

 @media screen and (max-width: 910px) {
   #one {
     float: none;
     margin-right: 10;
     width: auto;
     border: 0;
   }
  #map {
     float: none;
     margin-right: 10;
     width: auto;
     border: 0;
   }
 }

.container {
   max-width: 800px;
   height: 600px;
   margin: 40px auto;
   padding: 0px 40px 40px 40px;
 }

 h1 {
   text-align: center;
   letter-spacing: 1px;
   font-size: 45px;
   margin: 0px 0px 20px 0px;
   color: #185b9b;
 }

 .input,
 .msg .area {
   width: 100%;
   padding: 20px;
   box-sizing: border-box;
   margin-bottom: 25px;
   border: 2px solid #e9eaea;
   font-size: 14px;
   border-radius: 5px;
   outline: none;
   transform: all 0.5s ease;
 }

 .login .input {
   width: 48%;
   float: left;
   margin-right: 4%;
 }

 .login .input:last-child {
   margin-right: 0;
 }

 .enter .btn2 {
   width: 48%;
   float: left;
   margin-right: 4%;
 }

 .enter .btn2:last-child {
   margin-right: 0;
 }
 .msg .area {
   height: 200px;
 }

 .btn {
   
   background: #185b9b;
   height: 50px;
   line-height: 50px;
   text-align: center;
   border-radius: 5px;
   margin: 0 auto;
   margin-bottom: 25px;
   color: #fff;
   text-transform: uppercase;
   cursor: pointer;
 }

.btn2 {
  
   background: #185b9b;
   height: 50px;
   line-height: 50px;
   text-align: center;
   border-radius: 5px;
   margin: 0 auto;
   color: #fff;
   text-transform: uppercase;
   cursor: pointer;
 }
 .input:focus,
 .msg .area:focus {
   border: 2px solid #486255;
 }

 ::-webkit-input-placeholder {
   font-family: 'roboto';
 }
 <div class="topnav" id="myTopnav">
      <div>
        <a href="#home" class="active"><img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1200px-Google_2015_logo.svg.png" /></a>
        <a href="#contact">Contact Us</a>
        <a href="#download">Download</a>
      </div>
      <div class="menu-icons">
        <a href="tel:800-922-0204" class="icon">
<i class="fas fa-phone"></i>
  </a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
      </div>

    </div>

    <div class="main">

      <div class="header">
        <h2>LOREM IPSUM</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere
          ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..
        </p>

        <p>
          Fixed bar The Worl'd Finest?
        </p>
      </div>


      <div class="wrapper">
        <div id="one">

          <img src="http://jsfiddle.net/img/logo.png" />
        </div>
        <div id="two">
          <h2>LOREM IPSUM</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
            posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
          <br>
          <p>
            <p>
              https://google.com/
            </p>
        </div>
      </div>

      <div class="wrapper">
        <div id="one">

          <img src="http://jsfiddle.net/img/logo.png" />
        </div>
        <div id="two">
          <h2>LOREM IPSUM</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
            posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
          <br>
          <p>
            <p>
              https://google.com/
            </p>
        </div>
      </div>

      <div class="wrapper">
        <div id="one">

          <img src="http://jsfiddle.net/img/logo.png" />
        </div>
        <div id="two">
          <h2>LOREM IPSUM</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
            posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
          <br>
          <p>
            <p>
              https://google.com/
            </p>
        </div>
      </div>

      <div class="wrapper">
        <div id="one">

          <img src="http://jsfiddle.net/img/logo.png" />
        </div>
        <div id="two">
          <h2>LOREM IPSUM</h2>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor arcu ut tellus laoreet tristique. Aliquam erat volutpat. Ut sed lectus at lectus ultricies volutpat. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis
            posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. Duis posuere ex aliquet, auctor ante ullamcorper, volutpat lorem. volutpat lo..</p>
          <br>
          <p>
            <p>
              https://google.com/
            </p>
        </div>
      </div>




      <div class="wrapper">
       <div id="map" class="float"></div>
        <div id="two">
          <div class="container">
            <h1>Let's work together.</h1>

            <div class="login">
              <input type="text" placeholder="Your Name" class="input">
              <input type="text" placeholder="Your Email Address" class="input">
            </div>

            <div class="subject">
              <input type="text" placeholder="Subject" class="input">
            </div>

            <div class="msg">
              <textarea class="area" placeholder="Leave a Message"></textarea>
            </div>

            <div class="btn">Send Message</div>

            <div class="enter">
              <div class="btn2">Call 1-800-922-0204</div>
              <div class="btn2"> Download PDF</div>
            </div>
          </div>
        </div>
      </div>


      <footer>
        <p>Copyright © 2019 Logo Name, LLC. All Rights Reserved</p>
        <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
      </footer>

    </div>



    <script>
      function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
          x.className += " responsive";
        } else {
          x.className = "topnav";
        }
      }

      function initMap() {
        var location = {
          lat: -25.363,
          lng: 131.044
        };
        var map = new google.maps.Map(document.getElementById("map"), {
          Zoom: 4,
          center: location
        });
      }

    </script>

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBYzXj5wF4L6mChyyc5xwfb2QT1QEZ9VN8&callback=initMap">


    </script>

关于javascript - 固定导航隐藏在谷歌地图下并在滚动后单击时移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54799575/

上一篇：javascript - HTML 和 CSS 新手 : Drop down menu not displaying

下一篇：javascript - 基于 TOD 错误使用 Javascript 更改背景图像？

相关文章：

javascript - Tbody 垂直滚动条没有固定宽度

javascript - 垂直固定表头

javascript - 如何禁用原型(prototype)中的输入元素？

javascript - 什么会导致 slice() 工作，但 splice() 失败？

javascript - 如何使用 ng-repeat 全屏查看图像？

javascript - 如何在 Twig 内切换类(如果有条件)

javascript - 如何使用CSS将表单居中？

javascript - 在 React 中转换对象的对象

javascript - 3 秒后停止 JavaScript 函数

javascript - 如何在没有 toggleClass 的情况下制作切换器

©2024 IT工具网  联系我们