當我滾動到某個部分的某個部分時，某些元素不會消失

Question

我的代碼有一點問題。

如您所見，我的示例分為三個部分。 更確切地landing-page ， section和about 。 對於最后兩個，我使用CSS grid將它們分成兩個小節。

我正在嘗試使用jquery實現滾動transition 。 就像，當我滾動超過1/3的section ，我的left元素開始從opacity:0消失。 這應該分別在我的about部分中的我right元素上發生，但是在我的代碼中，當我滾動超過section的1/3時，就會發生這種情況。

我試圖將我的right.hidden的類更改為right.hide ，它完全消失了。

波紋管我已經附上了我的代碼，這是我的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的頂部。 因此，您希望每當超出.section的1/3時，就想說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