sticky header und responsive navigation

[UNCLEWILLY]

Hi Leute,
ich versuche gerade bei einer Seite eine Navigation welche ab einem bestimmten Punkt zu einem Aufklappmenu wechselt. Davor soll meine Navigationsleiste "sticky" sein, sprich ab einem bestimmten Punkt sich oben fixieren. Beides funktioniert, jedoch nicht ganz so wich ich das will. Der "sticky"-Header dockt nur auf einer betimmten Breite oben an wenn man darüber scrollt. Sont springt er ab enem gewissen Punkt nach oben. Das Aufklappmenü würde ich gerne full screen haben, tut aber auch nicht so ganz. Habe das Gefühl die zwie scripte behindern sich irgenwie gegenseitig.

Freue mich über jede Antwort.
Viele Grüße,
UNCELWILLY

HTML:

        <header>
            <a href="#"><img class="logoTop" src="img/logo.png" alt="Jahresendfiguren"></a>
       
            <nav id="header">
                <ul id="nav">
                    <li class="navLink"><a href="#">START</a></li>
                    <li class="navLink"><a href="#">BAND</a></li>
                    <li class="navLink"><a href="#">MUSIK</a></li>
                    <li class="navLink"><a href="#">LIVE</a></li>
                    <li class="navLink"><a href="#">KONTAKT</a></li>
                </ul>
            </nav>
    <script>
               // burgermenu //
                $("#nav").addClass("js");
               
                $("#nav").addClass("js").before('<div id="menu">&#10141</div>');
                $("#menu").click(function(){
                    $("#nav").toggle();
                });
                $(window).resize(function(){
                    if (window.innerWidth > 780) {
                        $("#nav").removeAttr("style");
                    }
                });
                // fix header//
            $(window).scroll(function() {
                if ($(this).scrollTop() > 800){
                    $('#header').addClass('sticky');
                }
                else{
                    $('#header').removeClass('sticky');
                }
            });
    </script>
        </header>

CSS:

header{
    width: 100%; height: 60px;
    margin-top: 0%;
    background: rgb(0, 0, 0);
}
#nav{
    text-align: center;
    margin-top: 0;
    padding: 0;
}
.navLink{ 
    display: inline-block;
    padding: 10px 3%;
}
.navLink a{
    width: 100px;
    display: block;
    text-decoration: none;
    color: #ffffff;
    font-weight: 300;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}
.navLink a:hover{
    color: #ff3333;
    list-style-type: disc;
    transform: translateY(1px);
}
.sticky{
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    background-color: #000;
}

@media(max-width: 780px){
    #menu{
        width: 30px;
        height: 50px;
        margin-left: 47%;
        display: block;
        position: fixed;
        text-align: center;
        cursor: pointer;
        font-size: 2.2rem;
        transform: rotate(90deg);
    }
   
    .menu_hide{
        display: none;
    }
    #nav.js{
        display: none;
    }
    #nav{
        top: 0;
        width: 100%;
        height: 100vh;
        position: fixed;
        list-style: none;
        background: #000;
       
    }
    .navLink{
        width: 100%;
    }
    #header{
        width: 100%;
        background: #000;
    }
}

 

[Quaese]

Hi,

so genau habe ich nicht verstanden, was das Problem ist. Ich habe ein Möglichkeit, bei der der Header fest oben angeheftet bleibt, solange die Breite unter 780 Pixel bleibt. Wird die Breite unterschritten, ist die 'mobile' Variante verfügbar.

<header>
  <a href="#"><img class="logoTop" src="img/logo.png" alt="Jahresendfiguren"></a>

  <nav id="header" class="sticky">
    <ul id="nav">
      <li class="navLink"><a href="#">START</a></li>
      <li class="navLink"><a href="#">BAND</a></li>
      <li class="navLink"><a href="#">MUSIK</a></li>
      <li class="navLink"><a href="#">LIVE</a></li>
      <li class="navLink"><a href="#">KONTAKT</a></li>
    </ul>
  </nav>
  <script>
    // burgermenu //
    var $nav = $("#nav");

    $nav.addClass("js").before('<div id="menu">&#10141</div>');

    $("#menu").click(function(){
      $nav.toggle();
    });

    $(window).resize(function(){
      $nav[(window.innerWidth > 780) ? 'addClass' : 'removeClass']("sticky");
    });

    $(window).trigger('resize');
  </script>
</header>

Vielleicht hilft dir das weiter.

Ciao
Quaese