Sticky navbar mit Header?

Ich will eine Webseite programmieren (mit CSS, HTML und JavaScript) , bei der ganz oben die Navigation unter dem Header bzw Logo ist. Aber wenn man runterscrollt, soll die navbar oben fest sein. Falls ihr versteht, was ich meine :D

Habe schon die Navbar, den Header, also die ganze Webseite gebaut.

Über Tipps und Hilfe würde ich mich freuen.

6 Antworten

Destranix

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, programmieren

01.10.2019, 13:21

Dazu gibt es beim css-Attribute "position" den Wert "sticky".

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/position#position:_sticky

Evtl. muss man noch ein Workaround einbauen, falls die Option nicht unterstützt wird, indem man beispielsweise zwei Elemente hat, eines fixed und eines im Textflow, wobei das fixed erst dann sichtbar wird, wenn das Textflowelement den Viewport verlässt.

Niklas

01.10.2019, 13:34

Hallo CorasQuestions,

das kannst du relativ einfach mit der CSS-Eigenschaft position: sticky erreichen.
Hier ein Live-Beispiel von mir: https://jsfiddle.net/d1ym26qz/

nav {
  position: sticky;
  top: 0;
}

Zwei Dinge solltest du noch beachten:

Damit der Effekt im Firefox funktioniert, musst du zusätzlich noch die Eigenschaft top: 0 setzen. Dieser Hinweis basiert auf einer Lösung die ich auf Stackoverflow fand.
Damit der Effekt im Safari funktioniert, musst du zusätzlich position: -webkit-sticky setzen.

Viel Spaß beim Ausprobieren!

LG Savix

Woher ich das weiß:Studium / Ausbildung

korbi27

03.10.2019, 09:40

Ist die absolute Angabe von Top nicht sogar ein Pflichtattribut? Stellt man Top Beispielsweise auf 10px, ist die mit sticky fixierte Navbar dann beim Scrollen 10px von oben entfernt... Kann aber auch sein, dass ich mich täusche.

EinAlexander

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

01.10.2019, 14:57

Aber wenn man runterscrollt, soll die navbar oben fest sein

Das geht so:

<!doctype html>
<title>position: sticky</title>
<style>
body
{
   padding:2em 0 0 0;
   margin:0
}
nav
{
   position:sticky;
   top:0;
   height:2em;
   line-height:2em;
   background:#ccc;
   width:100vW
}
</style>
<header>Hier der Header</header>
<nav>Navigation</nav>

Alex

TheTherion

01.10.2019, 13:20

Probier mal in CSS position:fixed aus.

Niklas

01.10.2019, 13:36

Das Problem ist, dass die Navbar dann dauerhaft angeheftet ist und den Header überlagert.

ArduinoGeek

12.08.2020, 16:59

Einfach mit position: sticky; im CSS File

Woher ich das weiß:Hobby

Ähnliche Fragen

Bild smooth kleiner machen?

Weiß irgendwer wie man in CSS, JavaScript, HTML ein Bild in den header einfügt und wenn man dann runterscrollt, das Bild dann smooth kleiner wird? Ich weiß nicht wie ich es erklären soll...Also da ist ein Logo im Header und wenn man runterscrollt bleibt der Header und das Logo an der selben Stelle aber das Logo wird smooth verkleinert...

Beispiel: goldener-fisch.at

...zur Frage

Gute KI um HTML-, CSS- und JS-Code für eine Webseite zu erstellen?

Hallo kennt jemand eine gute KI, um HTML-, CSS- und JavaScript-Code für eine Webseite zu erstellen?

...zur Frage

Wann bin ich fertig mit HTML und CSS?

Hallo,

Ich lerne schon seit einiger Zeit HTML und CSS, und habe schon einige etwas größere websiten erstellt (also die grafische Oberfläche). Ich wollte auch bald mit Javascript anfangen, aber man sollte ja erst mit einer anderen Sprache anfangen, wenn mann die erste gut kann, aber ich weiß nicht wann ich bereit bin.

Meine Frage: Was muss ich alles in HTML und CSS können, um mit Javascript anzufangen?

Danke:)

...zur Frage

Wann kann man JavaScript gut?

Also, ich kann von APIs Daten abrufen. Voice Recorder, Wetter Webseite etc.

Slideshows kann ich auch programmieren. Ist auch einfach. Node.js kann ich nicht und json habe ich noch nicht ganz verstanden.

HTML und CSS beherrsche ich richtig gut.

Wann würdet ihr sagen, dass man gut JavaScript Code schreiben kann?

...zur Frage

Webseite mit Wix programmieren oder selbst HTML, CSS und JavaScript lernen?

Zuerst möchte ich sagen, dass ich bereits Erfahrungen mit Programmiersprachen, wie Python und C habe.

Ich habe mir letztlich eine einfache Webseite (die mir auch gefällt) mit HTML, CSS und JavaScript programmiert (sie ist noch nicht online). Ich habe mich dazu etwas eingelesen und fand es bis hierhin auch nicht sonderlich schwierig. Die Art, wie ich programmiert habe, ist vielleicht nicht unbedingt professionell, aber das Ergebnis stimmt.

Meine Frage wäre, ob es Sinn macht, den Weg über HTML, CSS ... zu wählen, wenn ich die Webseite aufwerten will (Datenbanken, ...), da es für unerfahrene Programmierer sehr komplex werden könnte. Sind hier Webseiten, die mit Wix erstellt werden, sehr viel eleganter, billiger und einfacher?

...zur Frage

Javascript, html und css?

Ich habe jetzt mit programmieren angefangen, und um genauer zu sein mit Javascript. Ich weiß jetzt dass man Javascript, HTML und css zusammen kombinieren kann. Ich weiß aber immer noch nicht wie das gehen kann. Haben alle nicht verschiebe Codes oder wie ist es genau zu verstehen ?

...zur Frage

Guter Anbieter für Domain und Web Hosting bei dem man mit HTML/CSS und JS selber seine Webseite erstellen kann?

Hallo kennt da jemand ein guter?
Es muss nur so einfach wie möglich sein aber ich will alles selber programmieren mit HTML CSS und JavaScript also sowas wie Wordpress oder ähnliches will ich gar nicht.

...zur Frage

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>

...zur Frage

Wie nennt man diesen Job indem man Website mit HTML, CSS erstellt?

Hallo,

Man kann ja Websiten mit HTML, CSS und Javascript programmieren. Aber wie nennt man diesen Job indem man es machen kann. Weil ich mich damit gut auskenne und es gerne machen würde weil es mir viek spaß macht!

...zur Frage

Sticky navbar funktioniert nicht?

Guten Tag, ich muss für die Schule eine Webseite erstellen und wollte eine Sticky navbar einfügen. Dabei soll der untere Teil mit La Petite France, Cathédrale, rivière kleben bleiben. Kann mir jemand helfen?

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

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

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

<header>
    <section class="hero is-medium">
        <div class="hero-head">
            <nav class="navbar">
                <div class="container">
                    <div class="navbar-brand">
                        <a class="navbar-item" href="index.html">
                            <img src="cigogne_strasbourg.png" alt="Logo">
                        </a>
                        <span class="navbar-burger" data-target="navbarMenuHeroB">
                            <span></span>
                            <span></span>
                            <span></span>
                      </span>
                    </div>
                    <div id="navbarMenuHeroB" class="navbar-menu">
                        <div class="navbar-end">
                            <a class="navbar-item is-active" href="index.html">
                                Home
                            </a>
                            <a class="navbar-item" href="details.html">
                                Y arriver
                            </a>
                            <a class="navbar-item" href="anmeldung.html">
                                Composer ses vacances
                            </a>
                            <span class="navbar-item">
                              <a class="button is-info is-inverted">
                                <!--<span class="icon">
                                  <i class="fab fas fa-fingerprint"></i>
                                </span>-->
                                <span>Einloggen</span>
                              </a>
                            </span>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <div class="hero-body">
            <div class="tile is-ancestor">
                <div class="tile is-parent">
                    <div class="tile is-child is-4 is-align-content-end">
                        <h1 class="title is-2">Strasbourg</h1>
                        <h2 class="subtitle is-4">La P'tit Venise</h2>
                    </div>
                    <div class="tile is-child is-8">
                        <figure class="image">
                            <img width="10" src="cathedralefenetre.jpg" alt="Fenêtre"/>
                        </figure>
                    </div>
                </div>
            </div>
        </div>



<div id="navbar">
            <nav class="tabs is-boxed is-fullwidth">
                <div class="container">
                    <ul>
                        <li class="is-active">
                            <a href="javascript:void(0)">La Petite France</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">La Cathédrale Notre-Dame</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">La rivière</a>
                        </li>
                    </ul>
                </div>
            </nav>
</div>

    </section>
</header>

CSS:

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

...zur Frage

HTMX gut für Anfänger?

Ist es okay, erstmal HTMX und CSS, statt HTML, CSS und JavaScript für die Entwicklung einer Webseite zu nutzen, um erstmal das Prinzip von HTML und CSS zu verstehen? Ich habe nämlich nicht die ,,Kapazität", um jetzt auch noch JavaScript zu lernen, da ich mich gerade auf Java konzentriere.

...zur Frage

Navigation Bar in Html überdeckt zeilen-Wie kann ich das Beheben?

Hi Leute, Ich habe neulich eine navigation bar in Html css und javascript Programmiert. Jetzt habe ich aber das Problem, dass diese Navigation bar (Fixed on the top) Die ersten paar Zeilen, die ich schreibe überdeckt. Wenn ich in meinem

mit

die ersten paar Zeilen schreibe, werden diese von der Navigation bar überdeckt. Wenn ich aber einfach nur den Tag

schreibe, dann ist die navigation bar nicht mehr ganz oben sondern etwas nach unten verschoben. Das will ich auch nicht (: Was kann ich machen?

...zur Frage

Vokabeltrainer in Javascript?

Wie kann ich einen Vokabeltrainer ohne Datenbank oder PHP, am besten in Javascript (+ Html & css) Programmieren?

...zur Frage

Wie kann man in einer HTML-Website den Übersetzer ausschalten?

Ich habe eine eigene Website mit HTML, CSS und JavaScript programmiert und ich habe ein paar englische Wörter, die ich nicht Übersetzen möchte, sondern in Originalform stehenlassen möchte. Wie kann man das programmieren.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen