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

1 Antwort

Dory1
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
JavaScript
03.05.2016, 20:18

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)
FlugzeugAUT 
Fragesteller
 04.05.2016, 07:50

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


0
FlugzeugAUT 
Fragesteller
 04.05.2016, 08:08

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

0
FlugzeugAUT 
Fragesteller
 04.05.2016, 16:07
@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 :(

0
Dory1  04.05.2016, 17:32
@FlugzeugAUT

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.

0
FlugzeugAUT 
Fragesteller
 04.05.2016, 18:06
@Dory1

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>

0
Dory1  04.05.2016, 23:43
@FlugzeugAUT

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)

0