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的。

How to trigger a class that is only in view with 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 };
}

来源：How to get the distance from the top for an element?

如何在不同屏幕尺寸上获得相同的scrollY高度数字？

1 个答案: