Frage von FlugzeugAUT, 96

Wie programmiere ich den Übergang von Header Leiste zur Navigationsleiste (Html, css, Javascript)?

Also folgendes Problem.. Ich hätte gerne ganz oben einen Header, der zu sehen ist, bis man hinunterscrollt und das obere Ende der Navigationsleiste erreicht, wie erreiche ich es, dass die Headerleiste dann verschwindet und die Navigationsleiste fixiert am oberen Rand bleibt (Es soll so ein Übergang sein) ; ich hoffe ihr wisst wie ich mir das vorstelle.

Mich würde es sehr freuen, wenn mir jemand diesbezüglich eine hilfreiche und passende Antwort geben könnte und schon mal im Voraus freundliche Grüße :)

Antwort
von Dory1, 55

Dazu müsstest du beim scrollen abfragen wie weit der User bereits heruntergescrollt ist. Wird die Y-Position der Navigationsleiste überschritten setzt du einfach die CSS-Display-Eigenschaft der Navigationsleiste von static bzw. relative auf fixed. Zum Beispiel so:

JS

var navi = document.getElementById("navi");
var naviPosY = navi.offsetTop;

document.addEventListener("scroll", function(e) { if (window.scrollY > naviPosY) { navi.className = "fixed"; } else { navi.className = ""; } });

CSS

#navi.fixed {
  position: fixed;
  top: 0;
}

(Deine Navigationsleiste muss hierfür natürlich die ID "navi" haben)

Kommentar von Dory1 ,
Kommentar von FlugzeugAUT ,

Danke für die hilfreiche Antwort ich werde das zuhause gleich ausprobieren hoffe es klappt. Hätte jedoch noch folgende Fragen: Kann man dann die NAV leiste trotzdem auf width="100%" setzen? Und die zweite Frage, woher nimmst du, bzw. andere Leute, immer die Codes? Die kommen ja nicht aus dem Himmel ich bewundere sowas, hammer Leistung  :) Und ich kann dann trotzdem noch oberhalb einen Header einfügen? Sorry ist mir gerade noch eingefallen und wenn man so einen Profi als Gegenüber hat sollte man nachfragen :D
:) Wär nett wenn du mir das noch beantworten könntest, aufjedenfall vielen viellen Dank


Kommentar von FlugzeugAUT ,

Haben sich erübrigt die Fragen, habe ich schon in der Demo gesehen danke ;) Aber was anderes was ich nicht verstehe wieso verfärbt sich die Leiste dann rot kann man das umstellen, dass sie gleich bleibt? Also die schon bestehende NAV Leiste färben (bevor sie fixed ist)? Mfg

Kommentar von FlugzeugAUT ,

Sorry nochmal bin lästig, aber folgendes Problem... Die Dinge, die ich gefragt habe (war zugegebenermaßen in der Schule) und hatte keine Möglichkeit es auszuprobieren, aber jetzt beschäftige ich mich seit einer gewissen Zeit damit, aber es funktioniert nicht. Hab jetzt ein externes Javscriptsheet gemacht, dass ich sowohl in den Header <script type="javscript" href="name.js"></script> als auch in den Body eingefügt habe. Die Funktion habe ich genauso wie du es mir vorgeschrieben hast eingegeben, aber es will einfach nicht funktioinieren. Zuerst war Navigation einfach nur als Standart angezeigt (ohne Formatierung) und jetzt ist es einfach nur die ganze Zeit fixed oben, das heißt es nimmt mir die Funktion warum auch immer nicht :(

Kommentar von Dory1 ,

Das Script solltest du als letztes Element vor dem schließenden Body-Tag setzen (nicht in den Head der Seite) - denn alle Elemente die im Script verwendet werden, müssen schon vom Browser geladen sein, bevor das Script ausgeführt wird.

Die Navigationsleiste hatte ich nur zu Demonstrationszwecken rot gefärbt - die Angabe kannst du ja einfach im CSS weglassen.

Kommentar von FlugzeugAUT ,

Glaub mir ich würd dich nicht belästigen, wenn ich nicht stark am verzweifeln wäre.. Ich benutze das Notepad ++ hab exakt alles so gemacht, wie du es gesagt hast (id navigation) und so aber es will einfach nicht funktionieren. (das einzige was klappt, ist dass wenn ich fixed bei der Benennung wegmache, dass die Leiste dann nach den Kriterien angezeigt wird; also gleich am Anfang oben fixed ... :/Hier mein Code .. :/ hab ihn im wesentlichen zusammengefasst. Ps: Sollte das mit Script falsch sein im Head, ich hab es sowohl mit, wie auch ohne versucht.


extern: (über Stylesheet)

#header{background-color:blue;

color:white;

height:70px;

}


#navigation.fixed{

position:fixed;

width:100%;

top:0;

background:orange;

}

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"

>

<html>

<head>

<style type="text/css"></style>

<link rel="stylesheet" type="text/css" href="stylesheet.css">


<script type ="javascript/text">

</script>


<body>

<div id="header">Header</div>

<div id="navigation">Navigation</div>


<script type="javascript/text">

var navi = document.getElementbyId("navigation");

var naviPosY = navi.offsetTop;

document.addEventListener("scroll",function(e) {

                if (window.scrollY >= naviPosY){

   navi.className="fixed";

}else{
navi.className ="";
}
});

</script>

</body>

</html>

Kommentar von FlugzeugAUT ,

</head> bei dem Zitat vergessen

Kommentar von Dory1 ,

2 Fehler: 

<script type="javascript/text">

sollte lauten 

<script type="text/javascript">

oder noch besser

<script>


Das type-Attribut ist nämlich nicht notwendig wenn es sich um Javascript handelt. Eine andere Script-Sprache gibt es ja auch (noch) nicht im Browser ;)

Der zweite Fehler:

document.getElementById("navigation");

anstatt

document.getElementbyId("navigation");

(Das "B" wird groß geschrieben)

Keine passende Antwort gefunden?

Fragen Sie die Community