Появление элементов при скролле
Всем привет. Подскажите пожалуйста, как сделать появление элементов
при скролле. Элементов много, у всех один и тот же класс, и каждому нужно добавить другой класс. Все это должно работать, когда элемент в поле видимости. У меня сейчас работает не так. Когда первый элемент появился в зоне видимости, то классы добавились ко всем остальным элементам.
function scrollTracking(){
var element = $('.scroll-js');
var wt = $(window).scrollTop();
var wh = $(window).height();
var et = element.offset().top;
var eh = element.outerHeight();
var dh = $(document).height();
var ww = $(window).width();
if ((wt + wh >= et || wh + wt == dh || eh + et < wh) && ww > 1024){
for( var i = 0; i < element.length; i++) {
element.addClass('scroll-js--active')
}
}
}
$(window).scroll(function(){
scrollTracking();
});
//- 1 блок
.container.block.wrapper
.bg.scroll-js
svg
img(alt="image" src="img/img.jpg" loading="lazy")
//- 2 блок
ul.info__list.effect.scroll-js
li.info__items.items
.items__heading
.items__text
li.info__items.items
.items__heading
.items__text
li.info__items.items
.items__heading
.items__text
li.info__items.items
.items__heading
.items__text
//-3 блок такой же как первый
// 1 блок
.bg {
position: absolute;
left: -100%;
bottom: 0;
display: block;
transition: all .8s ease-out;
svg {
width: 350px;
height: 200px;
}
}
.scroll-js--active {
left: 0;
}
// 2 блок
.info__items {
opacity:0;
&:nth-child(2) {
transition-delay: .8s;
}
&:nth-child(3) {
transition-delay: 1.6s;
}
&:nth-child(4) {
transition-delay: 2.4s;
}
}
.scroll-js--active .info__items{
opacity: 1;
}
|
|
К сожаление, то что вы предлагаете, не работает в IE, а нужно
|
seven8959,
делайте цикл по элементам, и у каждого проверяйте видимость. |
Не совсем понял, сначала цикл, которые у меня? В этом цикле условие if(Так же которое у меня) и после условия вешаем класс?
|
seven8959,
примерно так.
var elements = $('.scroll-js');
$(window).scroll(function() {
elements.each(function(indx, el) {
var visibility = checkViewport(el);
if(visibility) $(el).addClass('scroll-js--active');
});
|
(((Что то не помогло
|
seven8959,
где минимальный код целиком?Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
seven8959,
сделано для ie. если что не так, делайте похожий макет со своими html и css.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.grid-container {
height: 300px;
overflow: hidden;
background-color: #0000FF;
margin: 10px auto;
width: 400px;
display: block;
}
.grid-container__col-1 {
height: 300px;
width: 100px;
border: 1px solid red;
transform: translateY(50%);
opacity: 0;
background-color: #FF1493;
box-sizing: border-box;
float: left;
}
.grid-container.animate .grid-container__col-1 {
transform: translateY(0px);
opacity: 1;
transition: 1.2s;
transition-delay: 0ms;
}
section {
height: 100vh;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
let container = document.querySelectorAll('.grid-container');
[].forEach.call(container, function(div) {
let children = div.querySelectorAll('.grid-container__col-1');
let length = children.length;
[].forEach.call(children, function(el, i) {
el.style.setProperty('transition-delay', (i * 1800 / length) + 'ms')
})
})
function anim() {
[].forEach.call(container, function(div) {
checkViewport(div) && div.classList.add("animate")
});
}
function checkViewport(a) {
var b = a.getBoundingClientRect();
return 0 < b.top && b.top + b.height < window.innerHeight
};
window.addEventListener("scroll", anim, false);
anim()
});
</script>
</head>
<body>
<section></section>
<div class="products-wrapper__grid-container grid-container">
<!-- column-1 -->
<div class="grid-container__col grid-container__col-1">some content</div>
<!-- column-2 -->
<div class="grid-container__col grid-container__col-1">some content</div>
<!-- column-3 -->
<div class="grid-container__col grid-container__col-1">some content</div>
<!-- column-4 -->
<div class="grid-container__col grid-container__col-1">some content</div>
</div>
<div class="products-wrapper__grid-container grid-container">
<!-- column-1 -->
<div class="grid-container__col grid-container__col-1">some content</div>
<!-- column-2 -->
<div class="grid-container__col grid-container__col-1">some content</div>
<!-- column-3 -->
<div class="grid-container__col grid-container__col-1">some content</div>
<!-- column-4 -->
<div class="grid-container__col grid-container__col-1">some content</div>
</div>
<div class="products-wrapper__grid-container grid-container">
<!-- column-1 -->
<div class="grid-container__col grid-container__col-1">some content</div>
<!-- column-2 -->
<div class="grid-container__col grid-container__col-1">some content</div>
<!-- column-3 -->
<div class="grid-container__col grid-container__col-1">some content</div>
<!-- column-4 -->
<div class="grid-container__col grid-container__col-1">some content</div>
</div>
<section></section>
</body>
</html>
|
Спасибо конечно, но так то это и было все мое.
|
| Часовой пояс GMT +3, время: 07:42. |