Anzeige

Horizontales Menü beim scrollen "mitholen"

Horizontales Menü beim scrollen "mitholen" | PSD-Tutorials.de

Erstellt von Voltic, 22.09.2012.

  1. Voltic

    Voltic Noch nicht viel geschrieben

    Dabei seit:
    05.02.2008
    Beiträge:
    31
    Geschlecht:
    männlich
    Ort:
    Koblenz
    Software:
    Unity
    Kameratyp:
    DSLR
    Horizontales Menü beim scrollen "mitholen"
    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
     
    #1      
  2. TECFreddy

    TECFreddy "alles und nichts"-Könner

    Dabei seit:
    20.04.2009
    Beiträge:
    101
    Geschlecht:
    männlich
    Ort:
    Dresden
    Software:
    GIMP, Notepad++, Scriptly, FileZilla, Poedit
    Kameratyp:
    Panasonic Lumix DMC-TZ5
    Horizontales Menü beim scrollen "mitholen"
    AW: Horizontales Menü beim scrollen "mitholen"

    mit
    Code (Text):
    1. position: fixed;
    bleibt es an der stelle die du angibst, vllt ist das ja schon was für dich
     
    #2      
  3. Voltic

    Voltic Noch nicht viel geschrieben

    Dabei seit:
    05.02.2008
    Beiträge:
    31
    Geschlecht:
    männlich
    Ort:
    Koblenz
    Software:
    Unity
    Kameratyp:
    DSLR
    Horizontales Menü beim scrollen "mitholen"
    AW: Horizontales Menü beim scrollen "mitholen"

    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.
     
    #3      
  4. _Hackstog_

    _Hackstog_ Noch nicht viel geschrieben

    Dabei seit:
    15.09.2012
    Beiträge:
    6
    Geschlecht:
    männlich
    Ort:
    Augsburg
    Software:
    Adobe Dreamweaver CS6, Adobe Photoshop CS6 Extended
    Horizontales Menü beim scrollen "mitholen"
    AW: Horizontales Menü beim scrollen "mitholen"

    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
    Code (Text):
    1. 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:

    Code (Text):
    1.  
    2. $(document).ready(function() {  
    3.       var abstand = $('.menu').offset().top;  
    4.       $(window).scroll(function() {    
    5.            if($(this).scrollTop() > abstand) {      
    6.                $('.menu').addClass('fest');    
    7.            } else {      
    8.                $('.menu').removeClass('fest');    
    9.            }  
    10.       });
    11. });
    12.  
    Danach musst du nur noch in CSS die Klasse fest definieren:
    Code (Text):
    1. .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.
     
    #4      
  5. randacek_pro

    randacek_pro Mod | Forum

    Dabei seit:
    09.07.2009
    Beiträge:
    4.747
    Geschlecht:
    männlich
    Software:
    Adobe Geschichten, GIMP und Blender
    Kameratyp:
    Canon (D)SLRs
    Horizontales Menü beim scrollen "mitholen"
    AW: Horizontales Menü beim scrollen "mitholen"

    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ß
     
    #5      
  6. Voltic

    Voltic Noch nicht viel geschrieben

    Dabei seit:
    05.02.2008
    Beiträge:
    31
    Geschlecht:
    männlich
    Ort:
    Koblenz
    Software:
    Unity
    Kameratyp:
    DSLR
    Horizontales Menü beim scrollen "mitholen"
    AW: Horizontales Menü beim scrollen "mitholen"

    Genau das habe ich gesucht!
    Wunderbar!
    Besten Dank! :) ;) :) :p :D
     
    #6      
Seobility SEO Tool
x
×
×