Vue intersectionobserver верхнее пересечение

@Radioaktiv · Регистрация: 09.10.2015

Студворк — интернет-сервис помощи студентам

как сделать отслеживание пересечения с шапкой и такое изменение в фиксированном блоке, как на Видео
мой код

шаблон вывода постов (посты подгружаю по одному)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    <template>
      <div
        v-for="article in articles"
        :key="article.content.id"
        ref="articlesRef"
        :data-id="article.content.id">
        <ArticleContent :article="article" />
      </div>
    
      <LazyCommonLoader v-if="isPendingNextArticle" />
    
      <div
        ref="intersectionElement"
        class="my-6 text-center mx-0 lg:ml-[102px] lg:mr-[305px]">
        <div class="h-px"></div>
      </div>
    </template>

переменные

JavaScript
1
2
3
4
5
6
7
8
9
10
11
    const articlesRef = ref();
    
      const options = {
        root: null,
        rootMargin: '0px',
        threshold: 0.5,
      };
      const lastId = ref();
      const intersectionElement = ref();
      const intersectionObserver = ref<IntersectionObserver | null>(null);
      const intersectionObserverTop = ref<IntersectionObserver | null>(null);

инициализация observer для подгрузки новой статьи при скролле вниз

JavaScript
1
2
3
4
5
6
7
8
    onMounted(() => {
        intersectionObserver.value = new IntersectionObserver(
          handleIntersection,
          options
        );
    
        intersectionObserver.value.observe(intersectionElement.value);
      });

callback observer

JavaScript
1
2
3
4
5
6
7
     const handleIntersection = (entries: IntersectionObserverEntry[]) => {
            entries.forEach((entry) => {
              if (entry.isIntersecting) {
                loadNextArticles();
              }
            });
          };

функция подгрузки статьи

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    const loadNextArticles = async () => {
        const lastArticle = articles.value[articles.value.length - 1];
    
        if (lastId.value === lastArticle.content.id) {
          return;
        }
    
        lastId.value = lastArticle.content.id;
    
        const response = await fetchNextArticle({
          articleId: lastId.value,
        });
    
        if (!response) {
          return;
        }
    
        articles.value.push({
          content: response,
        });
      };

теперь по вопросу
накидал watch для наблюдением и подпиской в observer новых статей

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
     watch(
        () => articlesRef.value,
        () => {
          articlesRef.value.forEach((articleElement) => {
            intersectionObserverTop.value?.unobserve(articleElement);
          });
    
          articlesRef.value.forEach((articleElement) => {
            intersectionObserverTop.value.observe(articleElement);
          });
        },
        {
          deep: true,
        }
      );

инициализация второго observer

JavaScript
1
2
3
4
5
6
7
8
9
10
    onMounted(() => {
        intersectionObserverTop.value = new IntersectionObserver(
          handleIntersectionTop,
          {
            root: null,
            rootMargin: `0px`,
            threshold: 0,
          }
        );
      });

callback

JavaScript
1
2
3
4
5
6
7
    const handleIntersectionTop = (entries: IntersectionObserverEntry[]) => {
        entries.forEach((entry, index) => {
          if (entry.boundingClientRect.top <=0) {
            console.log(entry.target);
          }
        });
      };

и здесь затуп, так как выводит по несколько блоков сразу при срабатывании observer

Новые блоги и статьи Все статьи Все блоги /
Когда сволочизм стал общественной нормой kumehtar 30.05.2025 Такой цирк порою видишь, не укладывается в голове. Там какие-то парни решили прыгать с парашютом. И снимать на камеру. Привязали к себе собаку, и спрыгнули вместе с нею. И подписали "Отважная. . .	Node.js изнутри: Рантайм, архитектура и исходный код Reangularity 29.05.2025 Node. js представляет собой среду выполнения JavaScript, построенную на движке V8 от Google Chrome. Но называть его просто "средой выполнения" - все равно что назвать швейцарский нож "штукой с. . .	Обработка Big Data на C# stackOverflow 29.05.2025 C# традиционно оставался в тени Java, Python и Scala, когда речь заходила о работе с большими данными. Многие считали, что . NET недостаточно зрелая для таких задач. Но времена изменились. Язык C#. . .	Как генерируется мир в Minecraft GameUnited 28.05.2025 Задумывались ли вы когда-нибудь о том, сколько песчинок на нашей планете? По приблизительным подсчетам - более 7 квинтиллионов! Это цыфра с 18 нулями. И все же, это даже не половина количества. . .	Один суперкластер Kubernetes для вообще всего Mr. Docker 28.05.2025 Ваша компания развивается, количество сервисов множится, команды разработки разрастаются, а DevOps-инженеры начинают напоминать ту самую собаку из мема про "всё нормально, когда ничего не нормально". . . .
CAP-теорема или почему идеальной распределенной системы не существует ArchitectMsa 28.05.2025 Вы переводите деньги со своего счета на счет друга. Казалось бы, что может быть проще? Вы открываете приложение банка, вводите сумму, жмете кнопку - и деньги мгновенно переходят с одного счета на. . .	Пишем первый чатбот на C# с нейросетью и Microsoft Bot Framework UnmanagedCoder 28.05.2025 Microsoft Bot Framework представляет собой мощнейший инструментарий для создания разговорных интерфейсов любой сложности. Он предлагает целостную экосистему, которая включает SDK для C#, сервисы. . .	Event-Driven приложения с Apache Kafka и KafkaFlow в .NET stackOverflow 26.05.2025 Для . NET разработчиков работа с Kafka традиционно сопряжена с определенными трудностями. Официальный клиент Confluent хорош, но часто требует написания большого количества шаблонного кода. Многие. . .	Квантовое программирование: Реализуем первый алгоритм на Q# EggHead 26.05.2025 Квантовое программирование — одна из тех областей, которая ещё недавно казалась чем-то недоступным обычному разработчику. Многие представляют себе учёных в белых халатах, работающих с огромными. . .	Запилил скелет проекта физического симулятора. Hrethgir 26.05.2025 Нзвание публикации "Вычислить VS запомнить — простой и экономичный пример организации обработки потока данных для физической симуляции". Пока только скелет, но всё - будет. . . .