如何停止移动Divs离开文档的长度？香草JS

Question

我有几个div在文档滚动时有一个事件监听器，它采用滚动的当前Y位置，时间稍微移动div。像这样：

ypos = window.pageYOffset;
contactLinks.style.top = ypos * 3.5 + 'px';

这意味着如果我继续滚动，div将继续运行。

我怎样才能阻止div离开innerHeight？

我试图最初将div contactLinks.style.top与innerHeight进行比较，但它继续进入else块。

这是代码：

let clientHeight = window.innerHeight;
document.addEventListener('scroll', parallex);

function parallex() {
    if (contactLinks.style.top >= clientHeight) {
        contactLinks.style.top = clientHeight + 'px';
    } else {
        ypos = window.pageYOffset;
        contactLinks.style.top = ypos * 3.5 + 'px';
    }
}

我也试过这个：

function parallex() {
    if (ypos >= clientHeight) {
        contactLinks.style.top = clientHeight + 'px';
    } else {
        ypos = window.pageYOffset;
        contactLinks.style.top = ypos * 3.5 + 'px';
    }
}

我试图搜索它，但可能我没有说得好，没有太多运气！

Answer 1

contactLinks.style.top是一个字符串（例如“700px”），而window.innerHeight是一个数字（例如700）。比较它们会产生意想不到的结果。

你可以使用offsetTop：

if (contactLinks.offsetTop >= clientHeight) {
    contactLinks.style.top = clientHeight + 'px';