当我滚动过去某个部分的某个部分时，某些元素不会淡入

Posted 2023-03-07

【中文标题】当我滚动过去某个部分的某个部分时，某些元素不会淡入

【英文标题】：Certain element won't fade in when I scroll past a certain portion of a section

【发布时间】：2018-10-12 06:29:05

【问题描述】：

我的代码有点问题。

如您所见，我的示例包含三个部分。更确切地说是landing-page、section 和about。对于最后两个，我使用CSS grid 将它们分成两个小节。

我正在尝试使用jquery 在滚动上实现transition。就像，当我滚动超过 section 的 1/3 时，我的 left 元素开始从 opacity:0 消失。这应该分别发生在我的about 部分中的我的right 元素上，但是对于我的代码，一旦我滚动超过section 的1/3，就会发生这种情况。

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

下面我附上了我的代码，这是一个 link 到我的 CodePen

翡翠

.landing-page
.section
  .left.hidden
  .right
.about
  .left
  .right.hidden 

萨斯

.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

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');

  );
);

【问题讨论】：

为什么要隐藏？该类被称为隐藏

仔细阅读我的帖子。我尝试更改它，因为我认为滚动 1/3 左右后它会消失

我读了这篇文章，仍然不明白为什么要改成不存在的课程？你期待什么？您必须删除或添加现有类

我认为使用隐藏的类，这在两个 div 之间很常见，创建了这个过渡。我希望我的右元素在我滚动 1/3 的 about div 后消失，而不是在我滚动 1/3 到部分后。这就是为什么我尝试使用不同的类。

你的问题是偏移量计算，你有两个右边部分，你得到第一个与左边第一个相同的偏移量

【参考方案1】：

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

截面偏移（右或左）应为

sectionTopOffset - 2 / 3 * sectionHeight

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

所以：

$(document).ready(function() 
  var sectionLeftEl = $('.section .left'),
    sectionRightEl = $('.about .right'),
    sectionLeftElOffset = sectionLeftEl.offset().top - (2 * sectionLeftEl.height() / 3),
    sectionRightElOffset = sectionRightEl.offset().top - (2 * sectionRightEl.height() / 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');
  );
);

.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";


.section .left 
  grid-area: left;
  background: orangered;
  transition: 2000ms;


.section .left.hidden 
  opacity: 0;


.section .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";


.about .left 
  grid-area: left;
  background: lightgreen;


.about .right 
  grid-area: right;
  background: orangered;
  transition: 2000ms;


.about .right.hidden 
  opacity: 0;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="landing-page"></div>
<div class="section">
  <div class="left hidden"></div>
  <div class="right"></div>
</div>
<div class="about">
  <div class="left"></div>
  <div class="right hidden"></div>
</div>

https://codepen.io/moshfeu/pen/jxmYyp?editors=0010