Получать положение div с scroll

У меня есть, например, один <div> в некой точке страницы. То, что я хочу, что, когда scroll будет в том же положении этого div я работал функция. Например:

if(Scroll == div){div.innerHTML="altura es ???'" ;}

Я попробовал это сделать с scrollTop но только меня выполняет функция, когда scroll находится в верхе, и, хороший, я хочу, чтобы выполнили ее, когда оба прорастут где-то здесь.

Здесь - мой код:

//asi es como lo se hacer pero no se si este correcto con srollTop
onscroll=function(){ 
    var yScroll=self.pageYOffset || (document.documentElement.scrollTop+document.body.scrollTop); 
    var div = document.getElementById('pp');
if(yScroll == div.scrollTop){div.innerHTML="altura es: "+yScroll;}
} 
 div{
    background:grey;
    font-size:30px;
    padding:5px;
    font-weight:bold;
    width:200px;
    border-radius:5px;

}
<!DOCTYPE html > 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title> 
</head> 

<body>
<br /> 
<br /> 

<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br />

<!--cando el scroll lleque a este div quiero ejecutar una funcion-->
<div id="pp">0</div>  
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
  
</body> 
</html>  
2
задан 03.07.2019, 10:42
1 ответ

Свойство Element.scrollTop показывает ее тебе posiciГіn scroll элемента, касающегося Вашего внутреннего помещения, не браузера, а следовательно лучшее состоит в том, чтобы вычислять высоту элемента прямо из-за Ваш posiciГіn абсолютная.

, Чтобы вычислять ее posiciГіn абсолютная (касающаяся окна, которое мы видим) любого элемента DOM, мы можем использовать Element.getBoundingClientRect().top, devolviГ©ndonos один DOMRect , который предоставляет нам все необходимые данные:

Representación de un DOMRect

Пример использования podrГ, - чтобы быть:

// Generamos la función que será llamada en cada evento de scroll
window.onscroll = () => {
  /* Obtenemos la posición absoluta del elemento en cuestión */
  var div = document.getElementById('pp');
  var yPos = div.getBoundingClientRect().top;
  /* Si está cerca del borde superior (pondremos un margen de 20px) mostramos el texto */
  if (Math.abs(yPos) < 20) {
    div.innerHTML = "Altura es: " + yPos;
  }
}
div {
    background: grey;
    font-size: 30px;
    padding: px;
    font-weight: bold;
    width: 200px;
    border-radius: 5px;
}
p {
  height: 100px;
  border: 1px solid red;
}
p:before {
  content: "Hacer scroll";
}
<p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p>

<!-- cuando el scroll llegue a este div quiero ejecutar una función -->
<div id="pp">Aún nada...</div>

<p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p>
2
ответ дан 03.12.2019, 03:23
  • 1
    Что гениальный спасибо друг! – andy gibbs 14.07.2019, 05:52