在页面的特定部分添加块

Question

我有一个网站。假设有5个高度为1000像素的块，当我在第4块时如何使用JS执行功能（在指定情况下div class ='one'，将c dispay ='none'更改为'flex'）< / p>

<header></header>
<main>
    <div class="1"></div>
    <div class="2"></div>
    <div class="3 "></div>
    <div class="4 one"></div>
    <div class="5"></div>
</main>

Answer 1

在您的示例中，您可以使用以下js代码通过class="4 one"获取元素：

var fouthElement = document.getElementsByClassName("one")[0]

如果您尝试将display样式更改为flex，请尝试以下操作：

var fouthElement = document.getElementsByClassName("one")[0]
fourthElement.style.display = "flex"

编辑：

感谢您澄清问题。在这种情况下，使用，当第四个元素在当前视图中时，这可能可以运行功能

var isInViewport = function(elem) {
    var bounding = elem.getBoundingClientRect();
    return (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

var fouthElement = document.getElementsByClassName("one")[0]

window.addEventListener('scroll', function() {
    if (isInViewport(fouthElement)) {
      alert("Element in view")
    }
})