Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.09.2021, 17:47
Интересующийся
Отправить личное сообщение для seven8959 Посмотреть профиль Найти все сообщения от seven8959
 
Регистрация: 10.11.2020
Сообщений: 20

Появление элементов при скролле
Всем привет. Подскажите пожалуйста, как сделать появление элементов
при скролле. Элементов много, у всех один и тот же класс, и каждому нужно добавить другой класс. Все это должно работать, когда элемент в поле видимости. У меня сейчас работает не так. Когда первый элемент появился в зоне видимости, то классы добавились ко всем остальным элементам.
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;
    }

Последний раз редактировалось seven8959, 29.09.2021 в 20:03.
Ответить с цитированием
  #2 (permalink)  
Старый 29.09.2021, 18:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,069

seven8959,
https://javascript.ru/forum/dom-wind...tml#post534123
Ответить с цитированием
  #3 (permalink)  
Старый 29.09.2021, 18:25
Интересующийся
Отправить личное сообщение для seven8959 Посмотреть профиль Найти все сообщения от seven8959
 
Регистрация: 10.11.2020
Сообщений: 20

К сожаление, то что вы предлагаете, не работает в IE, а нужно
Ответить с цитированием
  #4 (permalink)  
Старый 29.09.2021, 18:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,069

seven8959,
делайте цикл по элементам, и у каждого проверяйте видимость.
Ответить с цитированием
  #5 (permalink)  
Старый 29.09.2021, 18:47
Интересующийся
Отправить личное сообщение для seven8959 Посмотреть профиль Найти все сообщения от seven8959
 
Регистрация: 10.11.2020
Сообщений: 20

Не совсем понял, сначала цикл, которые у меня? В этом цикле условие if(Так же которое у меня) и после условия вешаем класс?
Ответить с цитированием
  #6 (permalink)  
Старый 29.09.2021, 18:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,069

seven8959,
примерно так.
var elements = $('.scroll-js');
 $(window).scroll(function() {
        elements.each(function(indx, el) {
            var visibility = checkViewport(el);
if(visibility) $(el).addClass('scroll-js--active');
       });
Ответить с цитированием
  #7 (permalink)  
Старый 29.09.2021, 19:32
Интересующийся
Отправить личное сообщение для seven8959 Посмотреть профиль Найти все сообщения от seven8959
 
Регистрация: 10.11.2020
Сообщений: 20

(((Что то не помогло
Ответить с цитированием
  #8 (permalink)  
Старый 29.09.2021, 19:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,069

seven8959,
где минимальный код целиком?Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #9 (permalink)  
Старый 29.09.2021, 21:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,069

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>
Ответить с цитированием
  #10 (permalink)  
Старый 29.09.2021, 21:26
Интересующийся
Отправить личное сообщение для seven8959 Посмотреть профиль Найти все сообщения от seven8959
 
Регистрация: 10.11.2020
Сообщений: 20

Спасибо конечно, но так то это и было все мое.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Появление при скролле и скрытие по клику samdo Общие вопросы Javascript 11 12.08.2020 13:55
Необъяснимое поведение прокрутки при использовании homekey demoniqus Events/DOM/Window 2 26.08.2019 10:05
Как перезапустить скрипт, при скролле верх? salofun jQuery 2 22.02.2015 19:59
Скрипт появляющихся элементов при скроллинге на html5 не работает - прошу помочь wladm Библиотеки/Тулкиты/Фреймворки 5 15.02.2015 11:00
Смещение элементов при .click() с использованием .clone() и .animate() Johnjs jQuery 5 21.10.2014 15:07