Question

我正在尝试使用Javascript检测用户在我的网站上滚动超过某个高度的时间，然后我的“社交”图标一旦达到该滚动断点就会淡入。

我想弄清楚的是，一旦alpha命中1并锁定它，我怎么才能运行fadeTo？因此，当用户再次向上和向下滚动时，fadeIn不会一次又一次地发生，除非它们启动页面重新加载，这将重置所有内容。

//SCROLL
$(window).on("scroll", function () {
//SOCIAL ICONS
if ($(this).scrollTop() > 1750) {
    $(".img-social .gith").stop(true).fadeTo(250, 1);
    $(".img-social .inst").stop(true).fadeTo(450, 1);
    $(".img-social .twit").stop(true).fadeTo(650, 1);
    $(".img-social .drib").stop(true).fadeTo(850, 1);
    $(".img-social .link").stop(true).fadeTo(1050, 1);
} else {
    $(".img-social .gith").stop(true).fadeTo(10, 0);
    $(".img-social .inst").stop(true).fadeTo(10, 0);
    $(".img-social .twit").stop(true).fadeTo(10, 0);
    $(".img-social .drib").stop(true).fadeTo(10, 0);
    $(".img-social .link").stop(true).fadeTo(10, 0);
}
});

由于

Answer 1

使用布尔值来记录它是否发生：

// SET BOOLEAN
var scrolled = false;

//SCROLL
$(window).on("scroll", function () {
//SOCIAL ICONS
    if ($(this).scrollTop() > 1750 && !scrolled) {
        $(".img-social .gith").stop(true).fadeTo(250, 1);
        $(".img-social .inst").stop(true).fadeTo(450, 1);
        $(".img-social .twit").stop(true).fadeTo(650, 1);
        $(".img-social .drib").stop(true).fadeTo(850, 1);
        $(".img-social .link").stop(true).fadeTo(1050, 1);
        scrolled = true;
    } else {
        $(".img-social .gith").stop(true).fadeTo(10, 0);
        $(".img-social .inst").stop(true).fadeTo(10, 0);
        $(".img-social .twit").stop(true).fadeTo(10, 0);
        $(".img-social .drib").stop(true).fadeTo(10, 0);
        $(".img-social .link").stop(true).fadeTo(10, 0);
        scrolled = false;
    }
});

Answer 2

运行代码后，只需将第一个if条件中的以下代码放入off scroll个事件：

$(window).on("scroll.socialIcon", function () {
    if ( $(this).scrollTop() > 1750 ) {
        // ...
        $(window).off("scroll.socialIcon"); // last line
    } else {
        //...
    }
});

因此scroll.socialIcon（命名空间）事件不再响应。

如何在滚动时只运行一次jQuery动画？

2 个答案: