Question

当 element(s) ($(.box-fadeTop)) 从底部到达页面的1/3时，我有一个简单的动画。
事情是这样的：

<块引用>

if（元素滚动时从底部到达页面的1/3）{
//做一些事情（用于显示内容的CSS）
}

它运行良好，但问题是当有多个 element 具有相同的 class name $(.box-fadeTop); 时。
一旦我到达第一个 element，它会为所有运行该功能。

如何根据每个 elements 位置（如果有多个）设置函数？

请全屏打开示例。

var fadeTop = $(".box-fadeTop");
var fadeTopReachBottom = (fadeTop.offset().top - (window.screen.height))+ window.screen.height / 3.33;

$(window).scroll(function () {
    var winScrollTop = $(window).scrollTop();
    
    if(winScrollTop >= fadeTopReachBottom){
        $('.box-fadeTop').css({
            transform: 'translate(0, 0)',
            transition: 'all 1s',
            opacity: '1'
        }, 500, 'ease');
    }

});

*, *:before, *:after {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

body {
    min-height: 3000px;
}

.box-fadeTop {
    width: 200px;
    height: 200px;
    border-radius: 4px;
    box-shadow: 0 0 1px 1px #888;
    margin: 0 auto;
    opacity: 0;
    transform: translate(50px, -50px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="margin-bottom: 1000px;"></div>

<div class="box-fadeTop"></div>

<div style="margin-bottom: 1000px;"></div>

<div class="box-fadeTop"></div>

Answer 1

它针对所有这些，因为 $(".box-fadeTop") 是包含该类的所有元素的数组，您只想定位距底部 33% 的元素。

在这种情况下，JavaScript 的 IntersectionObserver 是完美的解决方案。 IntersectionObserver 监视元素相对于窗口（或您指定的任何其他内容）的位置，并根据它们是否相交执行操作。

// Get an array of your "watched" elements
let boxes = document.querySelectorAll('.box-fadeTop');

// Set an observer to watch their position, and run some code if they are at 33% from the bottom of the viewport
let observer = new IntersectionObserver(function (entries, self) {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            adjustCss(entry.target)
            // Stop watching them if we don't want to repeat
            self.unobserve(entry.target);
        }
    });
}, { rootMargin: '0px 0px -33% 0px' });

// Tell each individual "box" to be watched
boxes.forEach(box => {
    observer.observe(box);
});

// Function to run on the item that is intersecting
function adjustCss (box) {
    jQuery(box).css({
        transform: 'translate(0, 0)',
        transition: 'all 1s',
        opacity: '1',
        background: 'red'
    }, 500, 'ease');
}

Answer 2

看看这个。它按预期工作。

$(window).scroll(function () {
    $(".container .box-fadeTop").each(function(){
      if ($(this).isInViewport()) {
        $($(this)).css({
          transform: 'translate(0, 0)',
            transition: 'all 1s',
            opacity: '1'
        }, 500, 'ease');
      }
    });
});

$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

*, *:before, *:after {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

body {
    min-height: 3000px;
}

.box-fadeTop {
    width: 200px;
    height: 200px;
    border-radius: 4px;
    box-shadow: 0 0 1px 1px #888;
    margin: 0 auto;
    opacity: 0;
    transform: translate(50px, -50px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"> 
    <div style="margin-bottom: 1000px;"></div>
    <div class="box-fadeTop"></div>
    <div style="margin-bottom: 1000px;"></div>
    <div class="box-fadeTop"></div>
 </div>

滚动具有相同类名的元素的 jQuery 动画

2 个答案: