Липкая навигация и Resposive Nav коды разрушают друг друга

Question

У меня есть navbar, который я хочу быть липким и отзывчивым, но они ломают друг друга, липкое, кажется, останавливает onclick="myFunction()" с отзывчивым

http://kenbeckhusen.com/

Пожалуйста, помогите !!

Код:

<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 header = document.getElementById("myHeader");
  var sticky = header.offsetTop;
  
  function myFunction() {
    if (window.pageYOffset >= sticky) {
      header.classList.add("sticky");
    } else {
      header.classList.remove("sticky");
    }
  }
  </script>

Answer 1

У вас есть две функции, называемые myFunction. Пока вы не в адаптивном режиме, используется только одна «myFunction», поэтому ошибки нет. Но как только вы входите в отзывчивый, у вас внезапно появляются две «функции», и все запутано.

Привыкайте использовать правильные имена функций, например, stickyFunction и отзывчивая функция. Ваши проблемы должны чудесным образом исчезнуть.

<script>
function responsiveFunction() { //edit the call to this method Too.
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>

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

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

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