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

Question

基于此处相同的w3school代码，存在类似的问题 Dropdown navigation bar vs sticky navigation bar?问与答，但我需要更多功能。

在台式机或宽屏上： 滚动页面时，导航栏是粘滞的。下拉菜单有效。对此感到满意。

在移动设备或窄屏上（出现媒体查询时）： 粘性功能仍然有效。但是，单击汉堡菜单时，导航栏消失。也没有下拉菜单。当页面滚动回到顶部时，Navbar重新出现并且汉堡包开始工作。

我花了很大一部分时间尝试使用html和css中的各种组合，但是似乎都没有用。我怀疑JS myFunction（）是罪魁祸首，但是，作为一个相对新手，我不了解足够的JS来解决问题。

可在此处https://codepen.io/harlequin8/pen/bxERNb/

查看Codepen

请帮助。谢谢

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>