Holen Sie sich eine Elementposition relativ zum oberen Rand des Ansichtsfensters

Lesezeit: 2 Minuten

dzimi

Ich muss die obere Position eines Elements relativ zum oberen Rand des Ansichtsfensters ermitteln, nicht das gesamte Dokument.

Ich habe es versucht offset().top; was die oberste Position relativ zum Dokument zurückgibt, und ich habe es versucht scrollTop() der immer wiederkehrt 0 unabhängig von der Sichtbarkeit des Elements im Ansichtsfenster.

Sie können es mit berechnen

$('#element').offset().top - $(window).scrollTop()

Arbeitsbeispiel

function get(){
  $('#output').html($('#element').offset().top - $(window).scrollTop());
}

get();
$(window).scroll(get);

#element {
  width:100px;
  height:100px;
  background:red;
}

#output {
  position:fixed;
  background:#000;
  color:#fff;
  width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="element"></div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

Nikk Wong

Für diejenigen, die nach einer Nicht-Jquery-Lösung suchen:

let el = /* get your el */

let top = el.getBoundingClientRect().top + 
          el.ownerDocument.defaultView.pageYOffset

Vielen Dank. Ich selbst bin hierher gekommen, um nach einem jQuery-Äquivalent von getBoundingClientRect zu suchen 🙂

– Arman Karimi

6. Juni 2021 um 7:30 Uhr

11208700cookie-checkHolen Sie sich eine Elementposition relativ zum oberen Rand des Ansichtsfensters

#Abfrage #Javascript