Липкий выпадающий Navbar исчезает, когда реагирует на маленький экран

Question

Был похожий вопрос, основанный на тех же самых кодах w3school здесь Выпадающая панель навигации против закрепленной панели навигации? спросил и ответил, но мне нужно немного больше функциональности.

На рабочем столе илиШирокоэкранный режим: панель навигации остается липкой при прокрутке страницы.Выпадающее меню работает.Доволен этим.

На мобильном или узком экране (когда срабатывают медиазапросы): функция закрепления все еще работает.Однако при нажатии на меню гамбургера навигационная панель исчезает.Нет выпадающего тоже.Navbar снова появляется, и гамбургер становится функциональным, когда страница прокручивается вверх.

Я провел большую часть дня, пробуя различные комбинации в 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

Ваша проблема относится к специфичности .Ваш класс .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>