我试图从窗口顶部获取数组中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;
答案 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