Javascript 向下滚动时淡入，向上滚动时淡出-基于窗口中的元素位置

我试图让一系列元素在窗口中完全可见时在向下滚动时淡入。如果我一直向下滚动，我不希望它们淡出，但如果我向上滚动，我确实希望它们淡出

这是我找到的最接近的JSFIDLE。

它完全符合我在向下滚动时的要求，但如果我向上滚动过这些元素，我也希望它们淡出

我试过了，但运气不好

            if( bottom_of_window > bottom_of_object ){

                $(this).animate({'opacity':'1'},500);  

            } else {

               $(this).animate({'opacity':'0'},500); }

---

非常感谢您花时间查看此内容。

您的尝试不起作用的原因是两个动画（淡入和淡出）相互作用

在对象可见之前，它仍然不可见，因此淡出的动画将运行。然后，在一秒钟后，当同一个对象变得可见时，淡入动画将尝试运行，但淡出仍在运行。所以他们会互相对抗，你什么也看不见

最终，该对象将变得可见（大部分时间），但这需要一段时间。如果你使用滚动条按钮上的箭头按钮向下滚动，动画会起作用，因为你会使用更大的增量滚动，创建更少的滚动事件

---

足够的解释，解决方案（JS、CSS、HTML）：

$（窗口）.on（“加载”，函数（）{
$（窗口）。滚动（函数（）{
var windowBottom=$（this.scrollTop（）+$（this.innerHeight（）；
$（“.fade”）。每个（函数（）{
/*检查每个所需元件的位置*/
var objectBottom=$（this.offset（）.top+$（this.outerHeight（）；
/*如果元素完全在窗口边界内，则淡入*/
如果（objectBottom
.fade{
利润率：50像素；
填充：50px；
背景颜色：浅绿色；
不透明度：1；
}

淡入01
淡入02
淡入03
淡入04
淡入05
淡入06
淡入07
淡入08
淡入09
淡入10
我对您的代码进行了一些调整，使其更加健壮。就渐进式增强而言，最好在JavaScript中使用所有淡入淡出逻辑。在myfunksyde的例子中，任何没有JavaScript的用户都看不到任何东西，因为
不透明度：0

    $(window).on("load",function() {
    function fade() {
        var animation_height = $(window).innerHeight() * 0.25;
        var ratio = Math.round( (1 / animation_height) * 10000 ) / 10000;

        $('.fade').each(function() {

            var objectTop = $(this).offset().top;
            var windowBottom = $(window).scrollTop() + $(window).innerHeight();

            if ( objectTop < windowBottom ) {
                if ( objectTop < windowBottom - animation_height ) {
                    $(this).html( 'fully visible' );
                    $(this).css( {
                        transition: 'opacity 0.1s linear',
                        opacity: 1
                    } );

                } else {
                    $(this).html( 'fading in/out' );
                    $(this).css( {
                        transition: 'opacity 0.25s linear',
                        opacity: (windowBottom - objectTop) * ratio
                    } );
                }
            } else {
                $(this).html( 'not visible' );
                $(this).css( 'opacity', 0 );
            }
        });
    }
    $('.fade').css( 'opacity', 0 );
    fade();
    $(window).scroll(function() {fade();});
});

$（窗口）.on（“加载”，函数（）{
函数fade（）{
var animation_height=$（窗口）.innerHeight（）*0.25；
变量比率=数学圆（（1/动画高度）*10000）/10000；
$（'.fade'）。每个（函数（）{
var objectTop=$（this）.offset（）.top；
var windowBottom=$（窗口）.scrollTop（）+$（窗口）.innerHeight（）；
if（objectTop

请看这里：

干杯，
Martin
我知道已经很晚了，但我使用了原始代码并更改了一些内容以轻松控制css。所以我用addClass（）和removeClass（）编写了一段代码

以下是完整的代码：

if（窗口的底部>对象的底部）{
$（this.addClass（'showme'）；
}
if（_窗口的底部_<_对象的底部_）{
$（this.removeClass（'showme'）；
很抱歉，这是一个旧的线程，但我想有些人仍然需要它

注意：我是使用Animate.css库来制作淡入淡出动画的

我使用了您的代码，刚刚添加了.hidden类（使用bootstrap的hidden类），但您仍然可以定义
.hidden{opacity:0；}

$(document).ready(function() {

/* Every time the window is scrolled ... */

$(window).scroll( function(){

/* Check the location of each desired element */
$('.hideme').each( function(i){

    var bottom_of_object = $(this).position().top + $(this).outerHeight();
    var bottom_of_window = $(window).scrollTop() + $(window).height();


    /* If the object is completely visible in the window, fade it it */
    if( bottom_of_window > bottom_of_object ){

        $(this).removeClass('hidden');
        $(this).addClass('animated fadeInUp');
    }    else {
            $(this).addClass('hidden');
               }

}); 
}); 
});

另一个注意事项：将此应用于容器可能会导致出现故障。
@minimographite-我在回答中添加了一个更新，以更新除
0
或
1
之外的其他不透明度值。感谢您的欣赏，这总是让海报很开心！如何修改此选项，以便您可以从左侧将每行中的每个元素淡入1当行进入可见状态时，是否一次向右而不是一整行？@CamrinParnell-我想我会将行中的每个元素（的ID）放入一个数组中，然后使用
fadeTo（）在for循环中遍历该数组中的每个元素
在每个元素上都有一行，但淡入淡出持续时间较短。这对页脚有效吗？我已经尝试过了，这非常有效，但对页脚无效footer@sm.ali可能有两件事妨碍了代码的工作。1）确保为页脚提供
淡入
类，此代码仅适用于具有该类的元素。2）如果（objectBottom
to
if（objectBottom对非javascript用户有很好的了解。我很喜欢你的答案：）我喜欢这个选项，因为它工作得更好！！如何更改对象的底部使其位于底部的顶部？
        if( bottom_of_window > bottom_of_object ){
            $(this).addClass('showme');
       }
        if( bottom_of_window < bottom_of_object ){
            $(this).removeClass('showme');

$(document).ready(function() {

/* Every time the window is scrolled ... */

$(window).scroll( function(){

/* Check the location of each desired element */
$('.hideme').each( function(i){

    var bottom_of_object = $(this).position().top + $(this).outerHeight();
    var bottom_of_window = $(window).scrollTop() + $(window).height();


    /* If the object is completely visible in the window, fade it it */
    if( bottom_of_window > bottom_of_object ){

        $(this).removeClass('hidden');
        $(this).addClass('animated fadeInUp');
    }    else {
            $(this).addClass('hidden');
               }

}); 
}); 
});