Jquery 某些元素赢了'；当我滚动过某个部分时，屏幕不会消失

我的代码有点问题

如您所见，我的示例有三个部分。更确切地说，

登录页

，

部分

和

关于

。对于最后两个，我使用

cssgrid

将它们分为两个子部分

我正在尝试使用

jquery

实现滚动上的

转换。类似地，当我滚动经过1/3的
部分时，我的
左
元素开始从
不透明度：0
淡出。这应该分别发生在my
about
部分的my
right
元素上，但在my code中，当我滚动到
部分的1/3处时，这种情况就会发生

我尝试将我的
right.hidden
的类更改为
right.hide
，它完全停止褪色

贝娄：我已经附上了我的代码，这是我的代码笔的一个附件

玉石

无礼

Jquery

$(document).ready(function() {
  var sectionLeftEl = $('.left'),
      sectionRightEl = $('.right'),
      sectionLeftElOffset = sectionLeftEl.offset().top / 3,
      sectionRightElOffset = sectionRightEl.offset().top / 3,
      documentEl = $(document);

  documentEl.on('scroll', function() {
    if (documentEl.scrollTop() > sectionLeftElOffset && sectionLeftEl.hasClass('hidden')) sectionLeftEl.removeClass('hidden');
    if (documentEl.scrollTop() > sectionRightElOffset && sectionRightEl.hasClass('hidden') sectionRightEl.removeClass('hidden');

  });
});

如果我理解正确，计算是错误的（额外的选择器问题@Temani Afif提到）

截面偏移（右或左）应为

截面地形偏移-2/3*截面高度

想象一下（或测试一下），当你开始滚动时，你可以看到
部分的顶部。因此，每当您超过1/3中的
.section
时，它就像说
2/3*.section.height（）

因此：


$（文档）.ready（函数（）{
var sectionLeftEl=$（'.section.left'），
sectionRightEl=$（'.about.right'），
sectionLeftElOffset=sectionLeftEl.offset（）.top-（2*sectionLeftEl.height（）/3），
sectionRightElOffset=sectionRightEl.offset（）.top-（2*sectionRightEl.height（）/3），
documentEl=$（文件）；
documentEl.on（'scroll'，function（）{
if（documentEl.scrollTop（）>sectionLeftElOffset&§ionLeftEl.hasglass（'hidden'））sectionLeftEl.removeClass（'hidden'）；
if（documentEl.scrollTop（）>sectionRightElOffset&§ionRightEl.hasClass（'hidden'））sectionRightEl.removeClass（'hidden'）；
});
});
。登录页{
高度：100vh；
宽度：100vw；
背景：灰色；
}
.科{
高度：100vh；
宽度：100vw；
显示：网格；
网格模板列：重复（2，1fr）；
网格模板区域：“左-右”“左-右”；
}
.左{
网格区域：左侧；
背景：橙色；
过渡时间：2000ms；
}
.section.left.hidden{
不透明度：0；
}
.部门.对{
网格区域：右；
背景：浅蓝色；
}
.关于{
高度：100vh；
宽度：100vw；
显示：网格；
网格模板列：重复（2，1fr）；
网格模板区域：“左-右”“左-右”；
}
.大约.左边{
网格区域：左侧；
背景：浅绿色；
}
.大约.对{
网格区域：右；
背景：橙色；
过渡时间：2000ms；
}
.关于.对.隐藏{
不透明度：0；
}

为什么要隐藏？这个班叫Hidden仔细阅读我的帖子。。我试着改变它，因为我认为它会在我滚动1/3后消失。我读了这篇文章，但仍然不明白为什么要改变一个不存在的类？你期待什么？您必须使用隐藏类删除或添加现有的classI Think，这在创建此转换的两个div之间很常见。我希望我的右元素在我滚动about div的1/3后淡出，而不是在我滚动到section的1/3后淡出。这就是为什么我尝试使用不同的类。你的问题是偏移量计算，你有两个右部分，你得到的第一个偏移量与第一个左部分相同
.landing-page
  height: 100vh
  width: 100vw
  background: gray
.section
  height: 100vh
  width: 100vw
  display: grid
  grid-template-columns: repeat(2, 1fr)
  grid-template-areas: 'left right' 'left right'
  .left
    grid-area: left
    background: orangered
    transition: 2000ms
  .left.hidden
    opacity: 0
  .right
    grid-area: right
    background: lightblue
.about
  height: 100vh
  width: 100vw
  display: grid
  grid-template-columns: repeat(2, 1fr)
  grid-template-areas: 'left right' 'left right'
  .left
    grid-area: left
    background: lightgreen
  .right
    grid-area: right
    background: orangered
    transition: 2000ms
  .right.hidden
    opacity: 0

$(document).ready(function() {
  var sectionLeftEl = $('.left'),
      sectionRightEl = $('.right'),
      sectionLeftElOffset = sectionLeftEl.offset().top / 3,
      sectionRightElOffset = sectionRightEl.offset().top / 3,
      documentEl = $(document);

  documentEl.on('scroll', function() {
    if (documentEl.scrollTop() > sectionLeftElOffset && sectionLeftEl.hasClass('hidden')) sectionLeftEl.removeClass('hidden');
    if (documentEl.scrollTop() > sectionRightElOffset && sectionRightEl.hasClass('hidden') sectionRightEl.removeClass('hidden');

  });
});