代码之家 › 专栏 › 技术社区 › 001

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

jquery javascript

001 · 技术社区 · 4 年前

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

if(滚动时元素从底部到达页面的1/3){
//做点什么(显示内容的CSS)
}

它工作得很好,但问题是当有多个 element 这是一样的 class name $(.box-fadeTop); .
一旦我到达第一 要素 它运行以下函数 全部的 .

如何根据每个选项设置功能 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>

0 回复 | 直到 4 年前

DEVIGNR 4 年前

它针对的是所有这些元素,因为$(“.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');
}

Ejilarasan J 4 年前

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

$(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>