Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

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

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>

Answer 1

[HoiZusammen]

ich habs ein wenig umgebaut.

        .txt{
            height: 35vh;
            background-color: #ddd;
            color: #212;
        }


        .header{
            position: sticky;
            top: 0;
            z-index: 999;
            background-color: #fff;
        }


        .content{
            height: 200vh;
            padding: 5rem;
        }



    <div class="txt">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Dignissimos facere distinctio quis doloribus saepe quam quo sint, 
        quas laborum in maiores dolore commodi, natus molestias.
    </div>




    <div class="header" id="header">
        <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
             <div id="flexbox">
                 <nav>
                     <ul class="menu">
                         <div class="flexitem" id="navFlex">
                            <li><a href="index.html">Home</a></li>
                            <li><a href="engagement.html">Unser Engagement</a></li>
                            <li><a href="contact.html">Kontakt</a></li>
                            <li><a href="about.html">Über mich</a></li>
                            <li><a href="referenzen.html">Referenzen</a></li>
                        </div>
                    </ul>
                </nav>
           </div>
       <div class="social" class="flexitem"></div>
    </div>


<div class="content">
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero    voluptates fugiat dicta facere ipsam! Illum molestiae magni, doloribus error necessitatibus qui fugit autem quas beatae et, ipsam eaque accusamus similique! Harum culpa omnis illo consectetur, dolore doloribus cumque architecto fugiat deserunt minima eaque reiciendis enim laboriosam cum ratione? Fugiat, aperiam?
</p>
  </div>

nicht schön, sollte aber funktionieren ;)

Comments

[regex9]

Folgende Fehlerkorrekturen sollten noch berücksichtigt werden:

1) Dieser Tag gehört raus:

</img>

denn img-Tags können keine Subelemente aufnehmen.

2) Logos sind dekorative Elemente. Da das Bild auch keinen funktionalen Zweck erfüllt, würde der Wert des alt-Attributs leer bleiben.

3) Beim Menü müssen die Elementtypen getauscht werden. Ein div-Element kann nicht direktes Kindelement einer Aufzählung sein oder li-Elemente als direkte Kinder in sich aufnehmen.

<div class="menu">
  <ul class="flexitem" id="navFlex">

[Thoss]

Hallo, hat alles super funktioniert, bis ich weiter gemacht habe und später horizontales scrolling deaktiviert habe. Seitdem ist wieder alles wie vorher und ich weiß nicht warum.

body, html {
    overflow-x: hidden;
}

[HoiZusammen]

@Thoss

Weshalb möchtest du pauschal: overflow mitgeben? - Mach das lieber nicht.

[Thoss]

@HoiZusammen

Die Site ist ein bisschen über die Seite hinausgegangen und der Balken unten hat gestört.

[HoiZusammen]

@Thoss

Versuche mal folgendes

Schreibe direkt an den Anfang deiner CSS-Datei

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}