个人中心
gpt4 book ai didi

javascript - 在滚动条上隐藏和显示的响应式导航栏

转载 作者：行者123 更新时间：2023-11-27 23:33:26 25 4
gpt4 key购买 nike

我想隐藏 navbar onscroll，然后再次向下显示 600px。我能够做到这一点，但即使我在页面下方超过 600 像素，响应式菜单也会在顶部弹出。

我是初学者，所以我想有一个我看不到的明显解决方案。

<script>
  // When the user scrolls down 20px from the top of the document, slide down the navbar
  window.onscroll = function() {scrollFunction()};

  function scrollFunction() {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 600) {
      document.querySelector(".navbar").style.top = "0";
    } else {
      document.querySelector(".navbar").style.top = "-70px";
    }
  }

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

  function resNav() {
    var y = document.getElementById("myNavbar");
    if (y.className === "navbar") {
      y.className += " responsive";
    } else {
      y.className = "navbar";
    }
  }
</script>

演示请看这支笔: https://codepen.io/arnelamo/pen/jgYVag

它工作正常，除了弹出式导航栏上的汉堡包，它将菜单呈现在页面顶部而不是实际点击的位置。

最佳答案

您的代码正确地将 position: fixed 应用于导航栏，但是当您单击汉堡包图标时，JavaScript 将 responsive 类应用于它。这反过来会触发 @media 屏幕和 (max-width: 600px) 选择器，它有更多 specificity比 .navbar 选择器。

要更正此问题，只需将 @media screen 和 (max-width: 600px) 设置为 position: fixed 而不是 position: relative。

这可以从以下方面看出:

body {
  margin: 0;
  background-color: #f1f1f1;
  font-family: Arial, Helvetica, sans-serif;
}

@media only screen and (min-width: 992px) {
  div.container {
    width: 970px;
    margin: auto;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  div.container {
    width: 750px;
    margin: auto;
  }
}

@media only screen and (max-width: 768px) {
  div.container {
    width: auto;
    margin: auto;
  }
}





.headline {
  color: white;
  display: flex;
  justify-content: center;
  padding: 300px 15px 0px 15px;
}

.bg {
  background-color: black;
  height: 600px;
  width: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  z-index: -1;
}


.crap {
  margin-top: 192px;
}

/* responsive top navbar*/

.topnav .icon {
  display: none;
}

@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 .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* responsive main navbar */

.navbar .icon {
  display: none;
}

@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: fixed;}
  .navbar.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* top navbar css */

.topnav {
  overflow: hidden;
  background-color: transparent;
}

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

.topnav a:hover {
  color: red;
}

.topnav a.active {
  color: white;
  border-bottom: 3px solid red;
}

/* main navbar css */

.navbar {
  text-align: center;
  background-color: rgba(10, 10, 10, 0.5);
  position: fixed;
  top: -70px;
  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 a:hover {
  color: red;
}

.navbar a.active {
  color: white;
  border-bottom: 3px solid red;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- My CSS -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>

    <header>
      <div class="topnav" id="myTopnav">
        <div class="container">
          <a class="active" href="#home">Home</a>
          <a href="#about">Projects</a>
          <a href="#contact">Contact</a>
          <a href="javascript:void(0);" class="icon" onclick="resTopNav()">
            <i class="fa fa-bars"></i>
          </a>
        </div>
      </div>

      <div class="bg">
      </div>

      <div class="navbar" id="myNavbar">
        <div class="container">
          <a class="active" href="#home">Home</a>
          <a href="#news">Projects</a>
          <a href="#contact">Contact</a>
          <a href="javascript:void(0);" class="icon" onclick="resNav()">
            <i class="fa fa-bars"></i>
          </a>
        </div>
      </div>

    </header>

    <div class="container">
      <div class="headline">
        <h1>Guns don't kill people. <br> Chuck Norris kills people.</h1>
      </div>
    </div>

    <div class="container">
      <div class="crap">
        <div style="padding:15px 15px 2500px">
          <p><b>Chuck Norris doesn't get put behind bars.Bars get put behind Chuck Norris.</b></p>

          <p>When Chuck Norris sets his watch, he sets time itself, When Chuck Norris is in the same room as a chess board, his name becomes 'Bobby Fischer' Chuck Norris is the only man to ever defeat a brick wall in a game of tennis Chuck Norris will attain statehood in 2009. His state flower will be the Magnolia. Chuck Norris can win a game of Connect Four in only three moves Chuck Norris doesn't face his fears, his fears face him Chuck Norris doesn't churn butter. He roundhouse kicks the cows and the butter comes straight out, There is no theory of evolution. Just a list of creatures Chuck Norris has allowed to live Chuck Norris doesn't read books. He stares them down until he gets the information he wants, Police label anyone attacking Chuck Norris as a Code 45-11... a suicide, If you ask Chuck Norris what time it is, he always says, "Two seconds 'til." After you ask, "Two seconds 'til what?" he roundhouse kicks you in the face.</p>
        </div>

      </div>

    </div>

    <script>
      // When the user scrolls down 20px from the top of the document, slide down the navbar
      window.onscroll = function() {scrollFunction()};

      function scrollFunction() {
        if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 600) {
          document.querySelector(".navbar").style.top = "0";
        } else {
          document.querySelector(".navbar").style.top = "-70px";
        }
      }

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

      function resNav() {
        var y = document.getElementById("myNavbar");
        if (y.className === "navbar") {
          y.className += " responsive";
        } else {
          y.className = "navbar";
        }
      }
    </script>
  </body>
</html>

但是请注意，这也会弄乱页面顶部移动设备上的扩展导航栏。因此，您可能希望通过基于 height 的 JavaScript 进行此更改(就像您对导航栏上的展示所做的那样)。

关于javascript - 在滚动条上隐藏和显示的响应式导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57367110/

25 4 0
文章推荐： html - 使表数据 Angular 接触
文章推荐： c++ - va_arg() 的问题
文章推荐： javascript - Ionic - 对具有不同内容的多个页面重复使用相同的 HTML 模板
文章推荐： javascript - Protractor 未知错误，从 DOM 中删除属性
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com