Das Hauptmenü der Seite soll ständig sichtbar sein (auch wenn man nach unten scrollt).
Der header hat aber eine Höhe von 90px, wenn ich ihn also einfach als Ganzes fixiere schaut es erstens nicht unbedingt gut aus und nimmt zweitens ziemlich viel Platz weg.
Darum möchte ich, dass sich der header einfach verkleinert wenn man nach unten scrollt, also der weiße Balken mit dem Login-Feld soll einfach verschwinden und das Logo soll verkleinert werden. Das Ganze soll dann so aussehn wie auf der IBM-Website (ibm.com/).
Ich kenne mich leider nicht wirklich mit den ganzen Javascript-Frameworks aus, daher wäre ich um eine fertige Lösung sehr dankbar. Am liebsten wäre es mir, wenn das Ganze auch mit jQuery ginge, weil IBM verwendet Dojo.
über Google findest du viele Beispiele und die sind auch einfach zu finden .
Wenn du das via jQuery machen willst ist es nicht wirklich schwer.
Hier ist mal ein sehr einfaches Beispiel.
EDIT: Live-Beispiel: jsfiddle.net/funkiscript/NmE6k/
"#toTop" <-- div ID, welches nach oben gesetzt werden soll, beim scrollen
function fixDiv() {
var $cache = $('#toTop');
//"200" <- Position ab wann es ge"fixed" wird
if ($(window).scrollTop() > 200)
//top: 0px <-- position wo es gefixed werden soll
$cache.css({'position': 'fixed', 'top': '0px'});
else
$cache.css({'position': 'relative', 'top': 'auto'});
}
$(window).scroll(fixDiv);
fixDiv();
Nach der Anmeldung ist man doch vermutlich in einer Sitzung mit Inhalt, der per PHP ausgeliefert
wird.
Von daher ist da java-script-Schnickschnack albern, überflüssig und nicht zuverlässig.
Stattdessen gibt man einfach den Anmeldebereich nur aus, wenn keine Sitzung offen ist.
Ist eine Sitzung offen, so gibt man stattdessen etwas aus, womit man die Sitzung beenden kann.
Da man diese beiden Inhalte verschiedenen Klassen oder Identifizierern zuordnen kann, kann
man damit auch problemlos in der statischen Stilvorlage verschiedene Dekorationen vorhalten.
Genau nach dem hab ich gesucht. Firebug meldet zwar, dass irgendwo ein Fehler ist, funktioniert aber trotzdem alles.
@hoffmann: Wenn ich dich nicht falsch verstanden habe, dann soll die Sichtbarkeit der Zeile in der das Login-Feld drinnen ist, davon abhängen, ob man angemeldet ist oder nicht. Ich will aber das der header generell nicht so viel Platz verbraucht, also beim runterscrollen nur mehr die wichtigsten Inhalte des headers sichtbar sind, sprich nur mehr das Logo und das Menu.
Das wäre nicht so gut wenn die nicht-eingeloggten User immer so nen riesigen Balken im Bild haben. Aber trotzdem Danke!
Es hindert dich doch niemand daran, den gegebenenfalls zu großen Balken per CSS kleiner
zu machen, das ist doch allein deine Entscheidung, was du mit PHP ausgibst und was in der
Stilvorlage steht ;o)
Und wenn du da jetzt mit js herummanipulierst, bringt das doch ohnehin für jene nichts, die das
gar nicht aktiviert haben, entweder haben die dann eben einen dicken Balken oder aber du
machst für die eine Lösung, die auch ohne js funktioniert, wie es generell sinnvoll ist.
Ein wirklich großes Problem ist das natürlich nicht, denn wenn der Balken stört, kann ja jeder
einfach CSS und gegebenenfalls auch die Anzeige von Bildern abschalten, um überflüssigen
Kram einzusparen. Das Projekt wirkt natürlich besser durchdacht, wenn der Autor das selber
auf die Reihe bekommt ;o)
.
