Question

当用户从顶部滚动200px并激活一些自定义圆圈时，我有以下脚本FromArn: 'arn:aws:ses:us-west-2:xxxxxxxxxxxxxxx:identity/alex.divito@mountainviewwebtech.ca', div。这是有效的（不是我想的最好的方式，我已经抛出了一些脚本来让它起作用）。

我的剧本：

fadeIn

问题是，如果我只是向上或向下滚动一下，脚本会不断重复它？我似乎无法找到这样做的最新情况？我如何阻止这种情况发生......

我已经通过Stackoverflow看了一下，那里给出的答案似乎不起作用。如果有人有另一个脚本做同样的事情？

我想要做的就是让div $(window).scroll(function() { if ($(this).scrollTop() > 200){ // 235 $('.hideme').fadeIn(2000); } $('.first.circle').circleProgress({ value: 1, startAngle: -Math.PI / 1 * 1, fill: {gradient: [['#ff6600', .3], ['#f2833a', .7]], gradientAngle: Math.PI / 4} }).on('circle-animation-progress', function(event, progress, stepValue) { $(this).find('strong').html(Math.abs(36 * progress).toFixed(0) + ''); }); $('.second.circle').circleProgress({ fill: {gradient: ['#0681c4', '#0681c4']}, startAngle: -Math.PI / 1 * 2, value: 1 }).on('circle-animation-progress', function(event, progress) { $(this).find('strong').html(Math.round(160 * progress) + ''); }); $('.third.circle').circleProgress({ startAngle: -Math.PI / 3 * 3, value: 1, fill: {gradient: [['#09c109', .9], ['#298e29', .1]], gradientAngle: Math.PI / 4} }).on('circle-animation-progress', function(event, progress, stepValue) { $(this).find('strong').html(Math.abs(9.4 * progress).toFixed(1) + ''); }); }) fadeIn进入页面的视口然后启动圆形动画...提前感谢！

Answer 1

var lastPosition = 0;
$(window).on('scroll', function () {
    let scrollTop = $(this).scrollTop();
    let $hideMe = $('.hideme');
    let $firstCircle = $('.first.circle');
    let $secondCircle = $('.second.circle');
    let $thirdCircle = $('.third.circle');
    if (lastPosition <= 200 && scrollTop > 200){ // 235  
        // if the last scroll position is under 201 and
        // the actual position is above 200, start the animations

        $hideMe.fadeIn(2000);

        $firstCircle.circleProgress({
            value: 1,
            startAngle: -Math.PI / 1 * 1,
            fill: {gradient: [['#ff6600', .3], ['#f2833a', .7]], gradientAngle: Math.PI / 4}
        }).on('circle-animation-progress', function(event, progress, stepValue) {
            $(this).find('strong').html(Math.abs(36 * progress).toFixed(0) + '');
        });

        $secondCircle.circleProgress({
            fill: {gradient: ['#0681c4', '#0681c4']},
            startAngle: -Math.PI / 1 * 2,
            value: 1
        }).on('circle-animation-progress', function(event, progress) {
            $(this).find('strong').html(Math.round(160 * progress) + '');
        });

        $thirdCircle.circleProgress({
            startAngle: -Math.PI / 3 * 3,
            value: 1,
            fill: {gradient: [['#09c109', .9], ['#298e29', .1]], gradientAngle: Math.PI / 4}
        }).on('circle-animation-progress', function(event, progress, stepValue) {
            $(this).find('strong').html(Math.abs(9.4 * progress).toFixed(1) + '');
        });
    } else if (scrollTop <= 200) {
        // if the current position is under 201, cancel the animations

        $hideMe.fadeOut(200);

        // ....
        // cancel all the circles, you'll have to check the correct methods needed
        // ....
    }

    lastPosition = scrollTop;
});

Answer 2

你可以像这样$(window).one("scroll",function(){编写你的Jquery，这只会绑定它一次。

jQuery脚本不断重复

2 个答案: