如何仅使用纯javascript对scroll上的元素进行简单的不透明度更改？

我试图让不透明度设置为0的元素在进入用户视图时变为1。如何仅使用纯javascript实现这一点？请不要用JQUERY。提前感谢您提供的任何帮助

我尝试过在视图中添加一个类和删除一个类，但没有任何效果。这是一项非常简单的任务，我只是不知道在这里该做什么。我已经找到了文档，但我所发现的要么包括jquery，要么比我要做的更复杂

<div class="outer">

        <div class="booger" ></div>

        <div class="booger"></div>

        <div class="booger"></div>

        <div class="booger"></div>

        <div class="booger"></div>

        <div class="booger"></div>

        <div class="booger"></div>

        <div class="booger"></div>

        <div class="booger"></div>
</div>


body {
box-sizing: border-box;

margin: 0;
padding: 0;
text-align: center;

text-decoration: none;
outline: none;
}

.outer {
width: 100%;
min-height: 100vh;
background-color: grey;

}

.booger {
display: inline-block;
width: 49%;

margin: 50px 30px;
padding: 100px 0;
background-color: darkgray;
opacity: 0;
}

.boogers {
opacity: 1;
} 

var toBeShown = document.querySelectorAll(".booger");

function showIt() {

const scrolled = (window.scrollY + window.innerHeight) -                        
(toBeShown.height/2);

const imageBottom = scrolled.offsetTop + scrolled.height;
const isHalfShown = scrolled > scrolled.offsetTop;
const isNotScrolledPast = window.scrollY < imageBottom;

if (isHalfShown && isNotScrolledPast) {
scrolled.classList.add('boogers');
} else {
scrolled.classList.remove('boogers');
}
}

window.addEventListener('scroll', showIt);

身体{
框大小：边框框；
保证金：0；
填充：0；
文本对齐：居中；
文字装饰：无；
大纲：无；
}
.外部{
宽度：100%；
最小高度：100vh；
背景颜色：灰色；
}
布格先生{
显示：内联块；
宽度：49%；
利润率：50像素30像素；
填充：100px0；
背景色：暗灰色；
不透明度：0；
}
布格斯先生{
不透明度：1；
} 
var toBeShown=document.queryselectoral（“.booger”）；
函数showIt（）{
常量滚动=（window.scrollY+window.innerHeight）-
（托贝镇高度/2）；
const imageBottom=scrolled.offsetTop+scrolled.height；
const ishalfshired=scrolled>scrolled.offsetTop；
const isnotScrolled pass=window.scrollY

您有几个问题。下面的代码有点像您想要的，但是用于确定何时显示div的数学不是100%正确的。我会让你来解决的

主要问题是

document.querySelectorAll

返回一个元素数组。因此，您需要处理该元素数组，检查每个元素是否在视图中，然后仅为该元素添加/删除类

此外，元素没有

height

属性。自由地使用

console.log

来探索可用的属性以及适合您的用途的属性

var toBeShown=document.queryselectoral（“.booger”）；
函数showIt（）{
toBeShown.forEach（函数（elem）{
常量滚动=（window.scrollY+window.innerHeight）-
（抵销要素/2）；
const imageBottom=elem.offsetTop+滚动；
const ishalfshired=滚动>元素偏移；
const isnotScrolled pass=window.scrollY
正文{
框大小：边框框；
保证金：0；
填充：0；
文本对齐：居中；
文字装饰：无；
大纲：无；
}
.外部{
宽度：100%；
最小高度：100vh；
背景颜色：灰色；
}
布格先生{
显示：内联块；
宽度：49%；
利润率：50像素30像素；
填充：100px0；
背景色：暗灰色；
不透明度：0.3；
}
布格斯先生{
不透明度：1；
}

干草
B
C
D
E
F
哇
海奇
你好
我同意他所列举的所有理由，但我认为逻辑可以澄清很多

您需要注意的是，当项目的顶部滚动到视口的中心时，添加一个类，当它在下面时，删除所述类

我放了一支密码笔来演示


函数showIt（）{
const toBeSHONE=文档.QueRealStudioAL（“.BoGER”）；（或）考虑添加：不（.滚动）到选择器以减少迭代次数，如果您不想支持滚动的话
//考虑将此循环外，并将其重置到窗口大小调整，以优化循环。
常数半屏幕=window.innerHeight/2；
Tobeshow.forEach（（项目，i）=>{
常量滚动=（window.scrollY+window.innerHeight）；//-（item.offsetHeight/2）；
if（item.offsetTop-window.scrollY<半屏幕）{
item.classList.add（'scrolled'）；
}否则{
item.classList.remove（'scrolled'）；
}
})
}
window.addEventListener（'scroll'，showIt）；

虽然我喜欢你们的班级命名标准，；-）我将
boogers
类更改为
scrolled
，使其含义更加明显
Jquery是JavaScript。从这里开始谢谢你，但我正在寻找更多的细节。这是我可以用jquery做的事情，现在我想从头开始做。谢谢，我肯定会从那里开始！我真的很感谢你的反馈。所以我已经修补了数学，但我似乎无法让它发挥作用。事实上，数学似乎与我想要做的正好相反，你建议我从哪里开始？据我所知，我将每个元素设置为在进入视口的一半时“显示”，但这绝对不是正在发生的事情。另外，我对你的答案投了赞成票。你需要一步一步地调试它。使用大量的
console.log
查看计算中每个变量的值，看看它们是否有意义，或者是否需要使用不同的值。哦，请参阅布赖恩·琼斯的答案。从我看到的情况来看，这很有效。非常感谢！这也正是我想要的。我仍然需要学习数学并使用console.log，这样我才能欣赏您和Todd.Awesome提供的智慧之词。很高兴我能帮忙。如果一切都好，你能接受它作为答案吗？谢谢
function showIt() {
  const toBeShown = document.querySelectorAll(".booger"); // consider adding :not(.scrolled) to selector to reduce the number of iterations if you don't want to support scrolling up

  // consider taking this outside of the loop and resetting it on window resize to optimize the loop
  const halfScreen = window.innerHeight / 2;

  toBeShown.forEach((item, i) => {
    const scrolled = (window.scrollY + window.innerHeight);// - (item.offsetHeight/2);

    if (item.offsetTop - window.scrollY < halfScreen) {
      item.classList.add('scrolled');
    } else {
      item.classList.remove('scrolled');
    }
  })

}

window.addEventListener('scroll', showIt);