jquery - Wie kann ein Element der Seite zu einem bestimmten Punkt folgen?

Ich muss es so machen, dass ein Element, das normalerweise (abhängig von der Auflösung) unterhalb des sichtbaren Bereichs einer Seite sein würde, am unteren Rand der Seite schweben und der Seite beim Scrollen folgen würde (in ähnlicher Weise) Weg zur Wirkung der Position: in CSS fixiert).jquery - Wie kann ein Element der Seite zu einem bestimmten Punkt folgen?

Aber ich brauche dieses Element, um dann zu stoppen und zu bleiben, wo es ist, wenn es erreicht, wo es natürlich gewesen wäre, wenn das irgendeinen Sinn macht!

Wenn das css/js nicht unterstützt wird, sollte das Element idealerweise auch in seiner "natürlichen" Position erscheinen.

Irgendwelche Ideen über den besten Weg, damit umzugehen? Wer kennt schon vorhandene jQuery-Plugins, die helfen könnten?

Vielen Dank,

Stu

Quelle

2009-07-28 stukerr

Dies ist, wie ich dies auf einer Client-Seite erreicht:

JavaScript (mit jQuery):

if(!$.browser.msie || ($.browser.msie && $.browser.version > 6)){ 
    $('body').append('<div id="listener" rel="generated">&nbsp;</div>'); 
    $(window).scroll(function() { 
     if($('#listener').offset().top > 150){ 
      $('body:not(.fixmenu)').addClass('fixmenu'); 
     }else{ 
      $('body.fixmenu').removeClass('fixmenu'); 
     } 
    }); 
}

CSS:

#listener{ 
    position: fixed; 
    top: 0; 
    right: 0; 
    height: 1px; 
    width: 1px; 
} 
#page #submenu{ 
    position: absolute; 
    top: 85px; 
    z-index: 3; 
} 
.fixmenu #submenu{ position: fixed; }

Die Technik: dynamisch generieren ein unsichtbares "Listener" div mit fester Positionierung in der oberen rechten Ecke der Seite. Wenn der Listener oben auf der Seite 150 Pixel (oder eine beliebige Zahl hier einfügen) oder mehr enthält, fügen Sie die Klasse "fixmenu" zu <body> hinzu. Verwenden Sie von hier aus CSS, um die Positionierung des Menüs von "Absolut" auf "Fest" zu setzen.

Da IE6 keine feste Positionierung unterstützt, entschied ich mich, es auszuschließen.

Quelle

2009-07-28 12:21:11

Tolles Zeug, vielen Dank! – stukerr

Erwähnenswert: da ich diesen Code geschrieben habe, verwarf jQuery $ .browser. Sie können als Alternative $ .support betrachten. –

jquery - Wie kann ein Element der Seite zu einem bestimmten Punkt folgen?

Antwort

Verwandte Themen