为什么用Javascript制作的响应式导航栏只能在iPhone浏览器刷新后才能使用？

Question

如果使用iPhone（实际设备）的用户第一次登录我的网站，“汉堡包菜单”根本无法打开菜单，导航栏也不会显示在滚动栏上。它似乎在Android设备上运行得很好（除了可能是相信responsinator的纵向模式下的Nexus 4）和Win台式机。

实际网站的后端是用Razor/ASP.NET制作的，但显然我认为这是一个纯粹的前端问题。

刷新后，它开始在苹果设备（以及iPhone）上工作。然后有时停止工作（一次或两次，它停止工作了，我相信）。

头（尝试删除异步和推迟，没有工作）：

<script type="text/javascript" src="script.js" async defer></script> 

这里是HTML（与在它的标志图像H2标签的不好的用法）：

<div id="navigation-main"> 
    <h2 class="logo"> 
     <a href="#"> 
        <img src="images/white-logo.png" alt=""> 
     </a> 
    </h2> 
    <div id="menu-icon"> 
     <span class="icon-menu-hamburguer"></span> 
    </div> 
    <nav id="menu-main"> 
     <ul> 
      <li><a class="scroll" href="#about-anchor">About us</a></li> 
      <li><a class="scroll" href="#agenda-anchor">Agenda</a></li> 
      <li><a class="scroll" href="#gallery-anchor">Gallery</a></li> 
      <li><a class="scroll" href="#sponsors-anchor">Sponsors</a></li> 
      <li><a class="scroll" href="#contact-anchor">Contact</a></li> 
      <li><a href="login.html">Log in <img src="images/login_icon.png" alt=""></a></li> 
     </ul> 
    </nav> 

CSS：

#navigation-main { 
    min-height: 60px; 
    z-index: 9; 
    overflow: hidden; 
    -webkit-transition: all 0.5s linear; 
    -moz-transition: all 0.5s linear; 
    -ms-transition: all 0.5s linear; 
    -o-transition: all 0.5s linear; 
    transition: all 0.5s linear; 
} 

#navigation-main:active { 
    background-color: #000000; 
} 

#navigation-main .logo { 
    float: left; 
} 

#navigation-main .logo img { 
    display: none; 
} 

#navigation-main nav { 
    position: relative; 
    top: 20px; 
} 

#navigation-main nav ul { 
    margin: 0; 
    padding-left: 0; 
} 

#navigation-main nav ul li { 
    list-style: none 
} 

#navigation-main nav ul li a { 
    color: #FFFFFF; 
    text-decoration: none 
} 

#navigation-main #menu-icon { 
    display: none; 
} 

#navigation-main.active { 
    background-color: rgb(0, 0, 0); 
    position: fixed; 
    top: 0; 
    height: 60px; 
    width: 100%; 
    margin-bottom: 0; 
    -webkit-transition: all 0.5s linear; 
    -moz-transition: all 0.5s linear; 
    -ms-transition: all 0.5s linear; 
    -o-transition: all 0.5s linear; 
    transition: all 0.5s linear; 
} 

#navigation-main.active img { 
    display: inline-block; 
} 

#navigation-main.active #menu-icon { 
    top: 10px; 
} 

#navigation-main.active .logo img { 
    max-width: 50%; 
} 

#navigation-main.active nav li a { 
    color: #FFFFFF 
} 

#navigation-main nav ul li img { 
    vertical-align: middle; 
} 

@media (max-width: 768px) { 
    #navigation-main .logo img { 
     max-width: 80% 
    } 
    #navigation-main #menu-icon { 
     padding: 18px 12px; 
     margin: 2px 0; 
     position: relative; 
     top: 20px; 
     display: block; 
     float: right; 
     z-index: 10; 
     cursor: pointer; 
    } 
    #navigation-main #menu-icon .icon-menu-hamburguer { 
     background: #ff0000; 
     width: 30px; 
     height: 4px; 
     margin: 2px 0; 
     display: block; 
    } 
    #navigation-main #menu-icon .icon-menu-hamburguer:after, 
    #navigation-main #menu-icon .icon-menu-hamburguer:before { 
     content: ''; 
     background: #ff0000; 
     width: 30px; 
     height: 4px; 
     display: block; 
     margin: 2px 0; 
     position: relative; 
    } 
    #navigation-main #menu-icon .icon-menu-hamburguer:before { 
     bottom: 8px; 
    } 
    #navigation-main #menu-icon .icon-menu-hamburguer:after { 
     top: 2px; 
    } 
    #navigation-main nav { 
     display: none; 
     width: 100%; 
    } 
    #navigation-main nav.menu-active { 
     display: block; 
     clear: both; 
     height: 100%; 
     position: fixed; 
     z-index: 1; 
     left: 0; 
     top: 0; 
     background-color: rgb(0, 0, 0); 
     background-color: rgba(0, 0, 0, 0.80); 
     overflow-x: hidden; 
    } 
    #navigation-main nav.menu-active ul { 
     position: relative; 
     top: 15%; 
     width: 100%; 
     text-align: center; 
     margin-top: 30px; 
    } 
    #navigation-main nav.menu-active a { 
     padding: 8px; 
     text-decoration: none; 
     font-size: 1.75rem; 
     display: block; 
    } 
} 

@media (min-width: 768px) { 
    #navigation-main nav { 
     float: right; 
     padding-right: 20px; 
    } 
    #navigation-main nav ul li, 
    #navigation-main nav ul li img { 
     display: inline-block; 
    } 
    #navigation-main nav ul li a { 
     padding: 0 5px; 
     font-size: 0.9rem; 
    } 
} 

的Javascript：

(function() { 

    ////////// Sticky navbar and hamburger icon 

    var headerScroll = getId('navigation-main'), 
     scrollHeight = 250, 
     menuIcon = getId('menu-icon'), 
     menuMain = getId('menu-main'), 
     classMenu = 'menu-active', 
     classHeader = 'active'; 

    // Scroll 
    window.addEventListener("scroll", scrollOn); 

    function scrollOn() { 
     animatedScroll(headerScroll, classHeader, scrollHeight); 
    } 

    // Responsive menu 
    menuIcon.onclick = function() { 
     toggle(menuMain, classMenu); 
    } 

    menuMain.onclick = function() { 
     toggle(menuMain, classMenu); 
    } 

    // Moving the element after scrolling 
    function animatedScroll(element, classN, height) { 
     y = pageYOffset; 
     if (y > height) { 
      element.className = classN; 
     } else { 
      element.className = ''; 
     } 
    } 

    // Change the element's class 
    function toggle(element, classe) { 
     element.className = element.className ? '' : classe; 
    } 

    // Return the element 
    function getId(id) { 
     return document.getElementById(id); 
    } 


    ////////// Sticky navbar and hamburger icon 

    // Feature Test 
    if ('querySelector' in document && 'addEventListener' in window && Array.prototype.forEach) { 

     // Function to animate the scroll 
     var smoothScroll = function(anchor, duration) { 

      // Calculate how far and how fast to scroll 
      var startLocation = window.pageYOffset; 
      var endLocation = anchor.offsetTop; 
      var distance = endLocation - startLocation; 
      var increments = distance/(duration/16); 
      var stopAnimation; 

      // Scroll the page by an increment, and check if it's time to stop 
      var animateScroll = function() { 
       window.scrollBy(0, increments); 
       stopAnimation(); 
      }; 

      // If scrolling down 
      if (increments >= 0) { 
       // Stop animation when you reach the anchor OR the bottom of the page 
       stopAnimation = function() { 
        var travelled = window.pageYOffset; 
        if ((travelled >= (endLocation - increments)) || ((window.innerHeight + travelled) >= document.body.offsetHeight)) { 
         clearInterval(runAnimation); 
        } 
       }; 
      } 
      // If scrolling up 
      else { 
       // Stop animation when you reach the anchor OR the top of the page 
       stopAnimation = function() { 
        var travelled = window.pageYOffset; 
        if (travelled <= (endLocation || 0)) { 
         clearInterval(runAnimation); 
        } 
       }; 
      } 

      // Loop the animation function 
      var runAnimation = setInterval(animateScroll, 16); 

     }; 

     // Define smooth scroll links 
     var scrollToggle = document.querySelectorAll('.scroll'); 

     // For each smooth scroll link 
     [].forEach.call(scrollToggle, function(toggle) { 

      // When the smooth scroll link is clicked 
      toggle.addEventListener('click', function(e) { 

       // Prevent the default link behavior 
       e.preventDefault(); 

       // Get anchor link and calculate distance from the top 
       var dataID = toggle.getAttribute('href'); 
       var dataTarget = document.querySelector(dataID); 
       var dataSpeed = toggle.getAttribute('data-speed'); 

       // If the anchor exists 
       if (dataTarget) { 
        // Scroll to the anchor 
        smoothScroll(dataTarget, dataSpeed || 500); 
       } 

      }, false); 
     }); 
    } 
})(); 

这里是JSFiddle。

如果是touchstart/onclick问题，为什么刷新后会起作用？我应该删除IFFE吗？我应该把脚本标签放在页面的最后？

这里似乎是什么问题？

Answer 1

显然标题中的行是一个问题。我删除了“异步”，导航菜单开始工作。

<script type="text/javascript" src="script.js" async defer></script> 

改为：

<script type="text/javascript" src="script.js" defer></script>