在滚动固定导航栏时，下拉菜单消失

Question

我有一个链接和下拉列表混合的导航栏。当我尝试使导航栏粘到顶部，以便在用户滚动时它将固定到屏幕顶部，导航栏的下拉功能退出工作。

CSS

.topnav {
overflow: hidden;
background-image: url(http://www.buffettworld.com/images/navmenubg.png);
background-size: 100%;
font-family: 'Pathway Gothic One', sans-serif;
margin-top: 10px;
position: fixed;
top: 0;
width: 100%;
} 


.topnav a {
float: left;  
display: block;
color: white;
text-align: center;
padding: 14px 25px;
text-decoration: none;
font-size: 21px;

}

.topnav .icon {
display: none;
}

.dropdown {
    float: left;
    overflow: hidden;

}

.dropdown .dropbtn {
    font-size: 21px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 25px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;

}

.dropdown-content {
    display: none;
    position: absolute;
    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: #b1d235;
  color: white;
}

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

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

@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;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

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

HTML

<div class="topnav" id="myTopnav">
  <a href="#home">HOME</a>
  <a href="#news">NEWS</a>
  <a href="#news">TOUR</a>
    <div class="dropdown">
    <button class="dropbtn">JIMMY 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
        <a href="#">BIOGRAPHY</a>
        <a href="#">AVIATION</a>
        <a href="#">INCIDENTS</a>
        <a href="#">BUSINESS EMPIRE</a>
        <a href="#">CONTACT JIMMY</a>
    </div>
        </div>
          <div class="dropdown">
    <button class="dropbtn">MUSIC 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
        <a href="#">ALBUMS</a>
        <a href="#">SONGS</a>
        <a href="#">CHART HISTORY</a>
        <a href="#">TRIBUTE BANDS</a>
  </div>
        </div>
        <a href="#about">SET LISTS</a>
        <a href="#about">ABOUT</a>
        <a href="#about">ADVERTISE</a>
        <a href="#about">CONTACT</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>


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

<script>
window.onscroll = function() {myFunction()};

var mytopnav = document.getElementById("mytopnav");
var sticky = mytopnav.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    mytopnav.classList.add("sticky")
  } else {
    mytopnav.classList.remove("sticky");
  }
}
</script>

这是一个JSfiddle：https://jsfiddle.net/martonian/shopttvk/1/

这是我第一次在这里问一个问题，所以希望一切都在这里需要。感谢