jquery - 当元素开始在窗口中显示时应用类

Question

我想将一个类应用于箭头底部(将 translateY 和 opacity 从 0 更改为 1 >) 当用户滚动并开始显示元素时。这些动画只发生 1 次。当菜单变得固定时，箭头就在旁边。你可以看一个例子here .

这是箭头:

我该怎么做？

我尝试过，但这不记录偏移底部，只记录滚动顶部:

      // cache the element
var $navBar = $('.arrow-down');

// find original arrow down position
var navPos = $navBar.offset().top;

    // on scroll
    $(window).scroll(function() {

        // get scroll position from top of the page
        var scrollPos = $(this).scrollTop();

        // check if scroll position is >= the arrow position
        if (scrollPos >= navPos) {
            $navBar.addClass('moving');

    }); 


      [1]: https://lagaleramagazine.es/rucab/index.html
      [2]: /image/7rDjP.png

Answer 1

你看过Intersection Observer API吗？ ？它是原生 JavaScript，因此不需要 jQuery。支持是not perfect ，但 Safari 已经采用了它，并将成为他们下一个移动和桌面版本的一部分。同时，您可以添加 polyfill以获得全力支持。

来自MDN :

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

元素进入视口(viewport)后，我将向图像容器添加一个 active 类。一旦处于事件状态，箭头的容器就会固定在屏幕底部附近(并保持可见)。

// Fires when element appears in the viewport
function onEntry(entry) {
  if (entry[0].isIntersecting) {
    entry[0].target.classList.add("active");
  }
}

// Instantiate a new Intersection Observer
let observer = new IntersectionObserver(onEntry);

let element = document.querySelector(".arrow-down");
observer.observe(element);

.arrow-down {
  opacity: 0;
  position: absolute;
  transition: 0.3s opacity;
}

.arrow-down.active {
  opacity: 1;
  cursor: pointer;
  position: fixed;
  bottom: 1em;
  animation: showArrowDown 1s alternate infinite;
}

@keyframes showArrowDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(1em);
  }
}

<p>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora error aliquam cumque, eligendi magni natus, molestias incidunt ducimus deserunt, vitae laboriosam sunt repudiandae earum! Nostrum rem possimus aspernatur a magnam! Saepe, quibusdam! Soluta
  nam quaerat unde sunt aspernatur explicabo voluptate voluptates illo at eaque quasi tempore, velit atque deleniti maxime. Dolorem, qui molestiae culpa quas sapiente facilis repellat tempore rem. Asperiores voluptatibus nobis ex amet praesentium. Voluptatum
  officiis id hic atque quam maxime ex expedita deleniti, voluptatibus perspiciatis dolor quisquam accusamus blanditiis, in nisi pariatur fugit nam facilis harum quo. Sapiente placeat voluptate, minima ipsum at modi beatae fugiat! Consequatur, culpa vitae
  debitis voluptas maxime totam quasi modi ab eveniet excepturi illum nulla numquam, ullam voluptatibus eos earum? Numquam, consectetur? Impedit distinctio quis cupiditate ab, obcaecati ducimus inventore labore atque at. Atque eius, a explicabo animi
  quaerat officia iusto culpa sunt nesciunt perferendis commodi fuga optio ullam expedita inventore quas.
</p>

<p>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora error aliquam cumque, eligendi magni natus, molestias incidunt ducimus deserunt, vitae laboriosam sunt repudiandae earum! Nostrum rem possimus aspernatur a magnam! Saepe, quibusdam! Soluta
  nam quaerat unde sunt aspernatur explicabo voluptate voluptates illo at eaque quasi tempore, velit atque deleniti maxime. Dolorem, qui molestiae culpa quas sapiente facilis repellat tempore rem. Asperiores voluptatibus nobis ex amet praesentium. Voluptatum
  officiis id hic atque quam maxime ex expedita deleniti, voluptatibus perspiciatis dolor quisquam accusamus blanditiis, in nisi pariatur fugit nam facilis harum quo. Sapiente placeat voluptate, minima ipsum at modi beatae fugiat! Consequatur, culpa vitae
  debitis voluptas maxime totam quasi modi ab eveniet excepturi illum nulla numquam, ullam voluptatibus eos earum? Numquam, consectetur? Impedit distinctio quis cupiditate ab, obcaecati ducimus inventore labore atque at. Atque eius, a explicabo animi
  quaerat officia iusto culpa sunt nesciunt perferendis commodi fuga optio ullam expedita inventore quas.
</p>

<p>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora error aliquam cumque, eligendi magni natus, molestias incidunt ducimus deserunt, vitae laboriosam sunt repudiandae earum! Nostrum rem possimus aspernatur a magnam! Saepe, quibusdam! Soluta
  nam quaerat unde sunt aspernatur explicabo voluptate voluptates illo at eaque quasi tempore, velit atque deleniti maxime. Dolorem, qui molestiae culpa quas sapiente facilis repellat tempore rem. Asperiores voluptatibus nobis ex amet praesentium. Voluptatum
  officiis id hic atque quam maxime ex expedita deleniti, voluptatibus perspiciatis dolor quisquam accusamus blanditiis, in nisi pariatur fugit nam facilis harum quo. Sapiente placeat voluptate, minima ipsum at modi beatae fugiat! Consequatur, culpa vitae
  debitis voluptas maxime totam quasi modi ab eveniet excepturi illum nulla numquam, ullam voluptatibus eos earum? Numquam, consectetur? Impedit distinctio quis cupiditate ab, obcaecati ducimus inventore labore atque at. Atque eius, a explicabo animi
  quaerat officia iusto culpa sunt nesciunt perferendis commodi fuga optio ullam expedita inventore quas.
</p>

<div class="arrow-down">
  <img src="/image/WtisH.png" alt="down arrow" />
</div>

<p>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora error aliquam cumque, eligendi magni natus, molestias incidunt ducimus deserunt, vitae laboriosam sunt repudiandae earum! Nostrum rem possimus aspernatur a magnam! Saepe, quibusdam! Soluta
  nam quaerat unde sunt aspernatur explicabo voluptate voluptates illo at eaque quasi tempore, velit atque deleniti maxime. Dolorem, qui molestiae culpa quas sapiente facilis repellat tempore rem. Asperiores voluptatibus nobis ex amet praesentium. Voluptatum
  officiis id hic atque quam maxime ex expedita deleniti, voluptatibus perspiciatis dolor quisquam accusamus blanditiis, in nisi pariatur fugit nam facilis harum quo. Sapiente placeat voluptate, minima ipsum at modi beatae fugiat! Consequatur, culpa vitae
  debitis voluptas maxime totam quasi modi ab eveniet excepturi illum nulla numquam, ullam voluptatibus eos earum? Numquam, consectetur? Impedit distinctio quis cupiditate ab, obcaecati ducimus inventore labore atque at. Atque eius, a explicabo animi
  quaerat officia iusto culpa sunt nesciunt perferendis commodi fuga optio ullam expedita inventore quas.
</p>

<p>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora error aliquam cumque, eligendi magni natus, molestias incidunt ducimus deserunt, vitae laboriosam sunt repudiandae earum! Nostrum rem possimus aspernatur a magnam! Saepe, quibusdam! Soluta
  nam quaerat unde sunt aspernatur explicabo voluptate voluptates illo at eaque quasi tempore, velit atque deleniti maxime. Dolorem, qui molestiae culpa quas sapiente facilis repellat tempore rem. Asperiores voluptatibus nobis ex amet praesentium. Voluptatum
  officiis id hic atque quam maxime ex expedita deleniti, voluptatibus perspiciatis dolor quisquam accusamus blanditiis, in nisi pariatur fugit nam facilis harum quo. Sapiente placeat voluptate, minima ipsum at modi beatae fugiat! Consequatur, culpa vitae
  debitis voluptas maxime totam quasi modi ab eveniet excepturi illum nulla numquam, ullam voluptatibus eos earum? Numquam, consectetur? Impedit distinctio quis cupiditate ab, obcaecati ducimus inventore labore atque at. Atque eius, a explicabo animi
  quaerat officia iusto culpa sunt nesciunt perferendis commodi fuga optio ullam expedita inventore quas.
</p>

<p>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora error aliquam cumque, eligendi magni natus, molestias incidunt ducimus deserunt, vitae laboriosam sunt repudiandae earum! Nostrum rem possimus aspernatur a magnam! Saepe, quibusdam! Soluta
  nam quaerat unde sunt aspernatur explicabo voluptate voluptates illo at eaque quasi tempore, velit atque deleniti maxime. Dolorem, qui molestiae culpa quas sapiente facilis repellat tempore rem. Asperiores voluptatibus nobis ex amet praesentium. Voluptatum
  officiis id hic atque quam maxime ex expedita deleniti, voluptatibus perspiciatis dolor quisquam accusamus blanditiis, in nisi pariatur fugit nam facilis harum quo. Sapiente placeat voluptate, minima ipsum at modi beatae fugiat! Consequatur, culpa vitae
  debitis voluptas maxime totam quasi modi ab eveniet excepturi illum nulla numquam, ullam voluptatibus eos earum? Numquam, consectetur? Impedit distinctio quis cupiditate ab, obcaecati ducimus inventore labore atque at. Atque eius, a explicabo animi
  quaerat officia iusto culpa sunt nesciunt perferendis commodi fuga optio ullam expedita inventore quas.
</p>