Hallo allerseits,
ich habe zwei Fragen, und um nicht sinnlos Themen zu spamen, mache ich einen Post.
Zu aller erst: Ich bin was die ganze HTML, CSS, Java, PHP & Co Geschichten noch relativ neu, also wär nett, wenn es „einfach“ erklärt werden kann Danke schonmal.
Und zwar hätte ich gerne einerseits ein mitlaufendes Menü. Wie das Menü stehen bleibt, habe ich schon herausgefunden, aber ich würde gerne, dass eine verkleinerte Version beim Scrollen mitläuft, wie beispielsweise auf www.top.de. Kann mir da jemand helfen?
Und ich suche ne gute Möglichkeit wie ich Hintergrundbilder „erhellen“ lassen kann. Ich hätte das gerne möglichst genau so wie bei www.intro.de. Da ist ein Bild wie mit einem halbtransparenten Verlauf versehen, und wenn ich drauf gehe mit der Maus wird es heller bzw. kriegt die Originalfarbe. Wie kann ich sowas umsetzen? Danke schonmal.
Schau dir „position: fixed“ mal in CSS an. Ansonsten rate ich dir sowieso am besten dierekt mit Bootstrap zu arbeiten, klint vielleicht doof aber besser von Anfang an, anstatt nachher ins kalte Wasser geworfen zu werden.
Was hält dich davon ab? Es gibt verschiedene Anstäze wie du es lösen kannst. Du kannst das bestehende Menü auch beim scrollen, verkleinern und Ihm position: fixed geben. Alles möglich mit CSS und JS. Natürlich musst du dich schon ein bisschen einlesen.
Du kannst dir mit JavaScript oder mit JQuery einen EventListener auf das Scroll-Event packen.
Hier im Beispiel wird beim Scrollen die Scrollpositon von oben abgefragt, liegt diese über 25px werden die Klassen der Navigation ersetzt! Du musst natürlich auch wieder die Orginalklassen zuweisen wenn wieder nach oben gescrollt wurde, das solltest du aber selbst schaffen.
//Javascript
window.addEventListener("scroll", function () {
var position = window.pageYOffset || document.documentElement.scrollTop;
if (position > 25) {
document.getElementById("NAV_ID").className ="NAV_KLASSE";
}
});
//Jquery
$(window).scroll(function() {
var position = $(window).scrollTop();
if (position > 25) {
$("#NAV_ID").removeClass().addClass("NAV_CLASS");
}
});
Danke schonmal.