数组中div与窗口顶部的距离

时间:2018-03-29 14:14:26

标签: javascript jquery

我试图从窗口顶部获取数组中div的距离但是收到错误" player.offset不是函数"。哪里出错了,我们将非常感谢任何帮助。



const players = Array.from(document.querySelectorAll('.js-player'));
        
$(window).on('scroll', function () {
    let scrollTop     = $(window).scrollTop();
    console.log(scrollTop)
    players.forEach(function(player) {
        let playerOffset = player.offset().top,
            distance      = (playerOffset - scrollTop);
        console.log(playerOffset, distance)
    })
});

.js-player {
  height: 100px;
  width: 100px;
  margin: 100px;
  background-color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="js-player"></div>
<div class="js-player"></div>
<div class="js-player"></div>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:1)

player是一个js元素。 offset()是一个jquery函数。因此,您需要一个jquery对象:

 $(player).offset().top

然而,从长远来看,你应该使用纯粹的js或纯粹的jquery,但不要混合它们,这只会产生混淆(就像在这种情况下)。

答案 1 :(得分:1)

.offset()是一个jQuery函数,请参阅http://api.jquery.com/offset/

你应该将播放器变量包装到jQuery中并像这样调用 .offset()。top

let playerOffset = $(player).offset().top;

或使用原生HTMLElement offsetTop 值,请参阅此处https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop

let playerOffset = player.offsetTop;

答案 2 :(得分:0)

你必须在DOM元素上使用偏移量,这样的东西应该起作用:

$('.js-player').offset().top - $('.js-player').offset().top