Update Ich möchte es vermeiden, durch alle Eltern des Elements zurückzugehen, indem ich jedes einzelne teste, aber das ist die beste Lösung, die ich bisher gefunden habe, wie in diese Antwort .
Innerhalb eines Event-Handlers möchte ich erkennen, ob die Position des Zielelements relativ zum Viewport (fest) oder zum Dokument (statisch, relativ oder absolut) ist.
Wenn die Position eines Elements festgelegt werden kann, weil es "position: fixed" hat oder weil eines seiner Eltern "position: fixed" ist, was ist eine effiziente Methode, um eine feste Positionierung für das Element zu erkennen?
Zum Beispiel:
CSS
%Vor%HTML
%Vor%JS
%Vor%Hier ist eine Lösung, die darauf basiert, durch die Eltern des Elements zu gehen und den Wert der CSS-Position für jedes Element nacheinander zu überprüfen.
Ist dies der effizienteste Weg, oder gibt es eine Möglichkeit, die effektive Positionierung zu erkennen, indem nur das Element selbst untersucht wird?
CSS
%Vor%HTML
%Vor%JS
%Vor%Mit $ (selector) .offsetParent () können Sie suchen durch die Vorfahren des Selektors, ohne alle Elemente Eltern zu laden. Es muss immer noch durch die Elemente Eltern gehen, wird aber aufhören, sobald es das nächste Element mit der gewählten Position findet (relativ, absolut oder fest).
CSS:
%Vor%HTML:
%Vor%Javascript:
%Vor%Verwendung: Rufen Sie es mit oder ohne das zweite Argument auf, das es standardmäßig nach einem festen Element sucht
%Vor%AKTUALISIERT , siehe unten ...
Ich bin hier vorbeigekommen, als ich eine reine Javascript-Lösung dafür gesucht habe ... Aber ich hoffe, dass jemand meine jquery-Version mögen wird.
Hier sind zwei Funktionen, die etwas anders funktionieren, aber die Leistungsunterschiede sind minimal. Ich habe es nicht gemessen, aber nach diesem Test auf jsperf "jeder vs Filter" der .each() version ist etwas schneller.
Trotzdem mag ich die .filter() Version, weil sie so kurz und klar ist.
Die Verwendung ist $('path > to > your > element').isfixed() und gibt true oder false
AKTUALISIEREN
Und hier ist die reine Javascript-Version. Es stellte sich heraus, dass el.style.position (fest / absolut / relativ) nicht funktioniert, weiß nicht warum, aber window.getComputedStyle(el)... tut es.
Es akzeptiert drei Arten von Elementparametern:
als JavaScript-Objekt:
var obj = document.querySelector('div#myID > span');
oder
var obj = document.getElementById('span#someID');
als jquery-Objekt:
var obj = $('div#myID > span');
oder nur als Selektor:
var obj = 'div#myID > span';
Die Verwendung ist einfach isfixed(obj); und liefert boolesche true oder false
Und hier ist endlich die gemischte Lösung (reines javascript als jquery plugin)
%Vor% Verwendung: $('div#myID > span').isfixed() wie in den obigen Beispielen.
Ich hoffe du wirst es mögen.
Tags und Links javascript html jquery css css-position