JQuery Kochbuch (German Edition)

+ '

') // 10

     .append('

ID des offsetParent von #foo: '
     + $fooOffsetParent.attr('id')) // the_offset_parent
     .append('

ID des offsetParent von #bar: '
     + $barOffsetParent.attr('id')); // foo
});
    Diskussion
    Bedenken Sie immer Folgendes: Die Methode
offset
gibt Ihnen immer die Position des Elements relativ zum Dokument zurück. Der Rückgabewert der Methode
position
kann die Position des Elements relativ zum Dokument sein – abhängig davon, ob es einen
offsetParent
besitzt oder nicht. Hat es einen
offsetParent
– also ein übergeordnetes Element, für das eine Positionierung vorgenommen wurde – gibt die Methode die Position relativ zum
offsetParent
zurück, nicht zum Dokument.
    ----
    Note
    Die jQuery-Methode
offsetParent
ist ein Ersatz für die DOM-Knoten-Eigenschaft
offsetParent
im Standard-JavaScript. In bestimmten Fällen – wenn zum Beispiel ein Element eine feste Position besitzt – geben manche Browser null zurück, wenn man sie nach der Eigenschaft
offsetParent
des Elements fragt.
    ----

Ein Element in den sichtbaren Bereich scrollen
    Problem
    Sie wollen das Dokument oder ein Element so scrollen, dass ein anderes Element sichtbar wird.
    Lösung: Scrollen des gesamten Fensters
    Wenn Sie das gesamte Fenster scrollen müssen, können Sie die Methode
offset
nutzen,um die Position des Ziel-Elements relativ zum Dokument zu bestimmen und dann mit der Methode
scrollTop
dasDokument so scrollen, dass das gewünschte Element sichtbar wird.
    Gehen wir zum Beispiel davon aus, dass wir zum Element
#foo
scrollen wollen, wenn der Anwender auf das Element
#bar
klickt:
jQuery('#bar').click(function() {
    var fooOffset = jQuery('#foo').offset(),
     destination = fooOffset.top;
    jQuery(document).scrollTop(destination);
});
    Lösung: Scrollen innerhalb eines Elements
    Befindet sich Ihr Ziel-Element in einem scrollenden Container, dann nutzen Sie die Methode
position
, um die Position des Elements relativ zum Container herauszufinden, addieren diese zur aktuellen Scroll-Position des Containers und nutzen anschließend die Methode
scrollTop
, um den Container so zu scrollen, dass das Element sichtbar wird. Beachten Sie, dass der scrollende Container positioniert sein muss – über
position: relative
,
position: absolute
oder
position: fixed
– damit dies funktioniert.
    Schauen Sie sich zum Beispiel das folgende Markup an, das so angelegt wurde, dass
#foo
nicht groß genug ist, um beide Absätze auf einmal anzuzeigen.

    


    
    
    

    Es ist einfach, zu
#foo
zu scrollen, um den letzten Absatz anzuzeigen:
var $foo = jQuery('#foo');
$('#bar').click(function() {
    var lastParagraphPosition = jQuery('#foo p:last').position();
    var scrollPosition = $foo.scrollTop() + lastParagraphPosition.top;
    $foo.scrollTop(scrollPosition);
});
    In beiden Beispielen geschieht das Scrollen sofort – effizient, aber nicht sonderlich hübsch. Die Methode
animate
animiert die Eigenschaft
scrollTop
eines Elements, so dass ein elegantes Scrollen leicht umzusetzen ist. So würden wir es für den Scroll-Container realisieren:
var $foo = jQuery('#foo');
$('#bam').click(function() {
    var lastParagraphPosition = jQuery('#foo