У меня небольшая проблема с моим кодом.
Как видите, мой пример состоит из трех разделов. Точнее landing-page
, section
и about
. Для последних двух я использовал CSS grid
, чтобы разделить их каждый на два подраздела.
Я пытаюсь набрать transition
на свитке, используя jquery
. Например, когда я прокручиваю 1/3 из section
, мой элемент left
начинает исчезать с opacity:0
. Соответственно, это должно происходить с моим right
элементом из моего about
раздела, но с моим кодом это происходит, как только я прокручиваю 1/3 из section
.
Я попытался изменить класс моего right.hidden
на right.hide
, и он полностью прекратил исчезать.
Сильфон Я прикрепил свой код, и вот ссылка на мой CodePen
Jade
.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');
});
});