Проверьте, когда класс попадает в класс при прокрутке сверху или снизу, используя jQuery - PullRequest
Новая
       37

Проверьте, когда класс попадает в класс при прокрутке сверху или снизу, используя jQuery

0 голосов
/ 23 апреля 2020

У меня есть боковая панель со свитком и фиксированным заголовком сверху. Весь контент в прокручиваемой области имеет несколько <li class="common-class"> с общим классом. Я хочу определить, когда этот common-class касается верхнего колонтитула, прокручивая верхнюю часть или нижний колонтитул, прокручивая вниз, используя jQuery.

Я добавляю класс в <li>, когда у них есть некоторые не прочитанные Сообщения. Это помогает мне определить, есть ли на боковой панели какие-либо не прочитанные сообщения, которые скрываются при прокрутке вверх или вниз.

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

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

Использование приведенного ниже фрагмента. 

public createMinThresholdObserver() {
    return new IntersectionObserver(function(entries) {
      if(entries[0].isIntersecting === true)
      {
        $('.more-unread-top').hide();
      } else {
        $('.more-unread-top').show();
      }
    }, { threshold: [0] });
  }

public createMaxThresholdObserver() {
    return new IntersectionObserver(function(entries) {
      if(entries[0].isIntersecting === true)
      {
        $('.more-unread-btm').hide();
      } else {
        $('.more-unread-btm').show();
      }
    }, { threshold: [0] });
  }

Используя вышеуказанные функции, я показываю наложение сверху, которое несколько сообщений скрываются сверху при прокрутке вниз и при прокрутке вверх, показывая наложение снизу при прокрутке вниз, используя самый высокий и самый низкий индексы в качестве идентификаторов DIV. Это так же, как показывает слабину.

...