获取相对于屏幕的元素位置。 （或替代解决方案）

Question

我知道之前曾经问过这个问题，但就我测试它们而言，实际上并没有回答这个问题。

基本上我需要的是在向下滚动时“点击”屏幕的顶部边框时更改一些元素样式。此元素是一个“返回顶部”按钮，它将位于一个部分中，并在用户滚动传递所述部分时开始关注该用户。

我不是在问CSS属性，我问的是一些让我知道这个的JS属性或方法。 IE：

$('#back').distanceFromTopOfTheScreen()  // This value will decrease as I scroll down

我知道还有其他灵魂，但客户已经要求这种行为。

有什么想法吗？

Answer 1

你可以：

  distance = $('#eleId')[0].getBoundingClientRect().top;

有关getBoundingClientRect()的更多信息，请查看MDN文档

注意：滚动时此值会发生变化，它会为您提供元素顶部边框与页面顶部之间的距离

Answer 2

有时JQuery会让一切比Native Javascript更令人困惑，甚至会忘记基本的功能：

window.onscroll = function() { fixPosition()};
function fixPosition() {
    var Yplus = 4; //number of lines in every scroll
    document.getElementById('element').style.top = document.body.scrollTop + Yplus ;
}

这将允许您移动＆＃34;元素＆＃34;滚动后窗口上的静态。