css - 在小屏幕上响应时，粘性下拉导航栏消失

Question

有一个类似的问题，基于此处相同的 w3school 代码 Dropdown navigation bar vs sticky navigation bar?问和回答，但我需要更多的功能。

在桌面或宽屏上:滚动页面时导航栏是粘性的。下拉菜单有效。对此感到高兴。

在移动设备或窄屏幕上(当媒体查询启动时):粘性功能仍然有效。但是，单击汉堡菜单时导航栏会消失。也没有下拉。当页面滚动回顶部时，导航栏会重新出现并且汉堡包会变得可用。

我一天中的大部分时间都在尝试 html 和 css 中的各种组合，但似乎都不起作用。我怀疑 JS myFunction() 是罪魁祸首，但作为一个相对新手，我对 JS 的了解不足以解决问题。

Codepen 可以在这里查看https://codepen.io/harlequin8/pen/bxERNb/

请帮忙。谢谢

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

window.onscroll = function() {
  myFunction2()
};

var navbar = document.getElementById("myTopnav");
var sticky = navbar.offsetTop;

function myFunction2() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky");
  } else {
    navbar.classList.remove("sticky")
  }
}

body {
  margin: 0;
  font-family: Arial
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

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

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 12px 16px;
  /*vertical align with .topnav a, from 14px 16px*/
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: fixed;
  /* absolute;
        ref. https://stackoverflow.com/questions/46535480/position-fixed-ruins-the-dropdown-menu-in-css-webpage */
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover,
.dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}


/* stocky part begin */

.header {
  padding: 0 16px;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky+.content {
  padding-top: 60px;
}


/* sticky part end  */

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child),
  .dropdown .dropbtn {
    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;
    border-bottom: .05px solid white;
    /* dropdown separation line */
  }
  .topnav.responsive a:nth-child(5) {
    border-top: .05px solid white;
  }
  /* dropdown separation line */
  .topnav.responsive .dropdown {
    float: none;
  }
  .topnav.responsive .dropdown-content {
    position: relative;
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<div class="topnav" id="myTopnav">
  <a href="index.html" class="active">Home</a>
  <a href="w3_responsive_topnav.html">News</a>
  <a href="#">Contact</a>
  <div class="dropdown">
    <button class="dropbtn">Products
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="w3_sticky.html">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">&#9776;</a>
    </div>
  </div>
  <a href="#">About</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<div class="content">
  <h3>Sticky Navigation Example</h3>
  <p>The navbar will stck to the top when you reach its scroll position</p>
  <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
    Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
  <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
    Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
  <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
    Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
  <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
    Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
  <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
    Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
  <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
    Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
  <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
    Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
  
</div>

Answer 1

您的问题是 specificity 之一 。你的.sticky类正确添加 position: fixed为扩展的响应式菜单保留导航栏...虽然 .topnav.responsive选择器添加 position: relative更具体。

要更正此问题，我建议在您的媒体查询中创建一个新类以添加 position:fixed返回，同时给出更多的特异性:

@media screen and (max-width: 600px) {
  .topnav.responsive.sticky {
    position: fixed;
  }
}

这可以从以下方面看出:

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

window.onscroll = function() {
  myFunction2()
};

var navbar = document.getElementById("myTopnav");
var sticky = navbar.offsetTop;

function myFunction2() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky");
  } else {
    navbar.classList.remove("sticky")
  }
}

body {
  margin: 0;
  font-family: Arial
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

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

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 12px 16px;
  /*vertical align with .topnav a, from 14px 16px*/
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: fixed;
  /* absolute;
        ref. https://stackoverflow.com/questions/46535480/position-fixed-ruins-the-dropdown-menu-in-css-webpage */
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover,
.dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}


/* stocky part begin */

.header {
  padding: 0 16px;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky+.content {
  padding-top: 60px;
}


/* sticky part end  */

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

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive.sticky {
    position: fixed;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    border-bottom: .05px solid white;
    /* dropdown separation line */
  }
  .topnav.responsive a:nth-child(5) {
    border-top: .05px solid white;
  }
  /* dropdown separation line */
  .topnav.responsive .dropdown {
    float: none;
  }
  .topnav.responsive .dropdown-content {
    position: relative;
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<div class="topnav" id="myTopnav">
  <a href="index.html" class="active">Home</a>
  <a href="w3_responsive_topnav.html">News</a>
  <a href="#">Contact</a>
  <div class="dropdown">
    <button class="dropbtn">Products
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="w3_sticky.html">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">&#9776;</a>
    </div>
  </div>
  <a href="#">About</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<div class="content">
  <h3>Sticky Navigation Example</h3>
  <p>The navbar will stck to the top when you reach its scroll position</p>
  <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
    Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
  <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
    Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
  <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
    Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
  <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
    Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
  <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
    Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
  <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
    Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
  <p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
    Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>

</div>