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

Question

当用户滚动并开始显示元素时，我想将一个类应用于箭头底部（将translateY和opacity从0更改为1）。发生这些动画只有一次。当菜单变成fixed时，箭头就在下一个。你可以看到一个例子here。

这是箭头：

我怎么能这样做？

我试过这个，但这不记录偏移底部，只有scrolltop：

      // 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]: https://i.stack.imgur.com/7rDjP.png

Answer 1

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

来自MDN：

Intersection Observer API提供了一种异步观察目标元素与祖先元素或顶级文档视口交叉的方法。

元素进入视口后，我将active类添加到图像容器中。一旦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="https://i.stack.imgur.com/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>

Answer 2

我建议你使用lazysizes。 https://github.com/aFarkas/lazysizes

IMO，交叉口Observer并不是那么好。

使用lazysizes，您可以延迟所有图像，并指定数据展开属性，以便在图像相对于视口延迟加载时进行微调。例：

<img data-src="img/arrow-down.png" class="arrow lazyload" data-expand="-20" alt="Baja para ver" title="Baja para ver">

根据视口和数据扩展标志，当认为适合加载时，它会将类更改为lazyloaded。现在就像简单地将你的css添加到.arrow.lazyloaded一样简单