Horizontales Menü beim scrollen "mitholen"

[Voltic]

Hi Jungs,

ich habe ein horizontales Menü in einem Div Layer mit ca. 1000 PX breite.
Das ist von oben ungefähr 100 px entfernt. Scrolle ich nun runter, verschwindet das Menü, was ja völlig normal ist.

Wie realisiere ich das nun, dass das Menü nach dem scrollen, bzw. übertreten der "Pixeldistanz" zum top, oben am Browser hängen bleibt, sodass der Nutzer jederzeit aufs Menü klicken kann?

Gibt es da CSS oder jQuery Lösungen?

Viele Grüße

[TECFreddy]

mit

position: fixed;

bleibt es an der stelle die du angibst, vllt ist das ja schon was für dich

[Voltic]

Leider bleibt der Abstand nach oben dann, sodass zwar mein Wunscheffekt mehr oder weniger eintritt, das Menü aber immer 100 px weit von Top, also vom Browserfensterbeginn, entfernt steht
Es soll ja oben hängen bleiben und beim hoch scrollen wieder in seine Ausgangsposition.

[_Hackstog_]

Mit CSS ist soweit ich weiß nicht mehr möglich, als das schon beschriebene position:fixed.

Wenn du willst, dass das Menü erst bis zum Bildschirmrand mitscrollt, benötigst du jQuery.

Mit der Funktion

var abstand = $('.menu').offset().top;

kannst du den Abstand deines Menüs zum oberen Bildschirmrand ermitteln.

Nun fragst du die beim scrollen die aktuelle Position ab, wenn diese größer als der Abstand ist fügst du dem Menü eine Klasse hinzu, sobald der Abstand wieder kleiner ist entfernst du diese Klasse wieder:

$(document).ready(function() {   
      var abstand = $('.menu').offset().top;   
      $(window).scroll(function() {    
           if($(this).scrollTop() > abstand) {       
               $('.menu').addClass('fest');     
           } else {       
               $('.menu').removeClass('fest');     
           }  
      }); 
});

Danach musst du nur noch in CSS die Klasse fest definieren:

.fest {position: fixed; top: 0px;}

Dadurch erhält dein Menü nur dann die Eigenschaft position:fixed, wenn es beim runterscrollen am Bildschirmrand ankommt. Scrollst du dann wieder hinauf, wird position:fixed wieder entfernt und alles ist wie zuvor.

[randacek_pro]

Ergänzend zum Vorschlag von _Hackstog_ hab ich da noch eine Seite gefunden, auf der das ausführlich dargestellt wird - ebenfalls mit Skript für jQuery.

Laut der Demo, macht es genau das, was du suchst - so wie ich dich verstanden habe

Sticky content Script | dynamicdrive.com

Lieber Gruß

[Voltic]

Genau das habe ich gesucht!
Wunderbar!
Besten Dank!