Question

我正在尝试创建一个通用函数，只需在我的网站中放置一次，就可以在多个页面上工作，既漂亮又轻巧。

当你在滚动上方达到10px时，我希望能够在网站上制作某些div。

我想通过简单地将以下属性添加到我的div中来实现：

.fade-in-block #specific-block-name

我的想法是，我可以浏览网站，添加此类和ID，动画也可以。

我几乎让它工作除了一件事，在调用函数后，滚动监听不断继续console.log。我不喜欢这样，因为感觉它会不断尝试应用动画，这不会从前端真正看到，但我觉得幕后不断的数学运算可能会减慢速度。

这是我的jQuery：

$('body .fade-in-block').each(function(){
            var block = '#'+$(this).attr('id');
            console.log('Block class is = '+block);
            var offset = $(block).offset().top;
            var $w = $(window).scroll(function () {
                if ($w.scrollTop() > offset - 10) {
                    console.log('reached block turn-on point for '+block);
                    $(block).removeAttr('id'); // remove the ID from the element so the script doesn't continue to find the element
                    // fade and rise animation here
                }
            });
        });

这是一个JSFiddle。它工作得很好，但一旦你点击块，你会看到它不断地记录每个像素滚动

。

我尝试通过在事件发生后从元素中删除id来解决此问题，但它会继续运行。

Answer 1

滚动和调整大小事件都有此问题，解决方案被称为debouncing。但是，我实际上从来没有真正进行过正常的工作。相反，我通常会创建一种在滚动条件激活后关闭的开关。在您的情况下，由于您有多个元素，您需要为每个元素分配一个开关。

$(window).on('scroll', function(){
    $('.fade-in-block').each(function(){
        var appear = $(this).attr('data-appeared');
        if(!appear){
            $(this).attr('data-appeared', true);
            //do something to $(this)
        }
    })
})

这里我在出现后添加了一个数据属性，并在数据属性出现后再次检查。

用特定类淡化div的通用代码，首次运行后删除函数

1 个答案: