如何在不同的屏幕尺寸上获得相同的滚动Y高度数字?

Question

所以我想在特定屏幕高度上添加一个类。所以我做了：

window.onscroll = function() {scrollPost()};
function scrollPost () {
var x = window.screen.width;
var i = window.scrollY;
var a = i / x;
animator (a);
slide(a);
}

function slide(x){
var a = (x * 100);
var i = Math.round(a);
console.log(i);
var slideIn = document.querySelector(".slide-in-right");
var slideOut = document.querySelector(".slide-out-left");
if (i >= 90){
slideOut.classList.add("animate");
slideIn.classList.add("animate");
slideIn.style.display = ("block");
}

然而问题所在。是在不同的屏幕上，值会有所不同。因此，在不同的屏幕上，它将在不同的时间切换。我可能会根据屏幕宽度做出if陈述。但是我需要很多。

我希望仅在容器在屏幕高度为 100% 后添加动画。你会怎么做？

Answer 1

• 你将不得不获取用户的视口(窗口高度(。
• 将其除以两半
• 将其添加到您的 IF 位置。

我写了一个模拟答案，它是如何写的jQuery，如果你正在考虑它会是一个更好的输出。

如何触发仅显示 wapoints 的类

但是，要将其实现为普通 js：

获取用户屏幕高度：

var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
alert(x + ' × ' + y);

将y除以二，然后添加到检查元素是否滚动的当前位置。

我会添加这个以防万一。获取元素位置。

function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
while(element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}

来源：如何获取元素与顶部的距离？