Адаптивное вмешательство JavaScript в липкое меню - PullRequest
Новая
       24

Адаптивное вмешательство JavaScript в липкое меню

0 голосов
/ 24 октября 2018

В настоящее время я пытаюсь составить адаптивное меню, которое прилипает к прокрутке.Я нашел два куска javascript в w3schools.Они делают то, что должны были по отдельности, но когда я соединяю их, они, кажется, мешают друг другу.То, что происходит, - меню липкое, но когда меню сворачивается в значок «бургер» (меньшая ширина окна), меню не появляется при щелчке.Может ли кто-нибудь указать мне направление решения этой проблемы?

Я очень благодарен за любую помощь, которую я могу получить, и я надеюсь, что мое объяснение имеет смысл.Большое спасибо!

Это сценарии: 

//Show menu content on click

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


//Menu sticky on scroll

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

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

function myFunction() {
   if (window.pageYOffset > sticky) {
      header.classList.add("sticky");
   } 
   else {
      header.classList.remove("sticky");
   }
}

Это меню: 

<div class="topnav" id="myTopnav">
    <a href="#home" class="active">HOME</a>
    <a href="#menu2">Menu2</a>
    <a href="#menu3">Menu3</a>
    <a href="#menu4">Menu4</a>
    <a href="#menu5">Menu5</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
       <i class="fa fa-bars"></i>
    </a>
</div>

Это стиль: 

.topnav {
  overflow: hidden;
  float: right;
  clear:right;
  margin: 0px 30px;
}

.topnav a {
  float:left;
  display: inline-block;
  color: white;
  text-align: center;
  padding: 15px 20px 15px 20px;
  text-decoration: none;
  font-size: 14px;
 }

.topnav a:hover {
  background-color: #0600FF;
  color: white;
 }

 a.active {
  color: white;
  border-bottom: 2px white solid;
 }

 .topnav .icon {
   display: none;
 }

/* Sticky */
.sticky {
  position: sticky;
  top: 0;
 }

@media screen and (max-width: 700px) {
  .topnav a {display: none;}
  .topnav a.icon {
  float: right;
  display: block;
  color: white;
  margin-right: 40px;
  padding:10px 10px 10px 10px;
  background-color: #0600FF;    
  }
 }

@media screen and (max-width: 700px) {
 .topnav.responsive {position: relative;}
 .topnav.responsive .icon {
 position: absolute;
 right: 0;
 top: 0;
}

.topnav.responsive a {
 float: none;
 display: block;
 text-align: right;
}

.topnav.responsive a:not(:first-child) {
 background-color:white;
} 

/* The "Home"-menu item is moved below the menu icon */
 .topnav a:first-child {
 margin-top: 48px;   
 }   
}
...