Question

我的代码有点问题。

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

我尝试使用transition滚动jquery。就像，当我滚过section的1/3时，我的left元素开始从opacity:0淡出。我的right部分中的about元素应该会发生这种情况，但是只要我滚动过section的1/3，就会发生我的代码。

我尝试将right.hidden的班级更改为right.hide，但它已完全停止消失。

Bellow我已附上我的代码，这里是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');

  });
});

Answer 1

如果我理解正确，那么计算是错误的（除了@Temani Afif提到的选择器问题之外）。

部分偏移（右或左）应为

sectionTopOffset - 2/3 * sectionHeight

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

所以：

＆＃13;

$(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');
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

1 个答案: