Определенный элемент не исчезает, когда я прокручиваю определенную часть раздела

У меня небольшая проблема с моим кодом.

Как видите, мой пример состоит из трех частей. Точнее landing-page, section и about. Для последних двух я использовал CSS grid, чтобы разделить их на две части.

Я пытаюсь получить transition при прокрутке с помощью jquery. Например, когда я прокручиваю 1/3 section, мой элемент left начинает исчезать с opacity:0. Соответственно, это должно происходить с моим элементом right из моего раздела about, но с моим кодом это происходит, как только я прокручиваю 1/3 section.

Я попытался изменить класс своего right.hidden на right.hide, и он полностью перестал исчезать.

Ниже я прикрепил свой код, и вот ссылка на сайт на моем CodePen

Джейд

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

Sass

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

  });
});

почему меняли, чтобы скрыть? класс называется скрытым

— 02.05.2018 10:01

прочтите мой пост внимательно .. Я попытался изменить его, потому что думал, что он исчезнет после того, как я прокручу 1/3 мимо

— 02.05.2018 10:04

Я прочитал сообщение и до сих пор не понимаю, зачем переходить на несуществующий класс? чего вы ожидаете? вам нужно либо удалить, либо добавить существующий класс

— 02.05.2018 10:06

Я подумал об использовании класса hidden, который является общим для двух div, создавших этот переход. Я хочу, чтобы мой правый элемент исчезал после того, как я прокручиваю 1/3 своего о div, а не после прокрутки 1/3 в раздел. Вот почему я попробовал использовать другой класс.

— 02.05.2018 10:12

ваша проблема связана с вычислением смещения, у вас есть ДВА правых раздела, и вы получаете смещение первого, которое совпадает с первым левым

— 02.05.2018 10:14

увеличьте специфичность вашего селектора $('.about .right')

— 02.05.2018 10:15

Я до сих пор не могу этого понять. Я изменил свой селектор, как вы сказали, и теперь оба моих перехода пропали.

— 02.05.2018 10:19

jquery html css sass pug

02.05.2018 09:57

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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

02.05.2018 10:36