javascript - 当滚动条为 2500px 时如何运行此脚本？

Question

我在这里尝试过，但我认为我做错了什么，可以帮忙吗？我在这里看到了一个类似的代码，刚刚进行了调整。谢谢你。

$(document).ready(function(){
    $(document).scrollTop() >= 2500) {
            var bar = $('.bar');
            var p = $('.percents');
            var interval;
            var start = 0; // start animation at 0%
            var end = parseInt(92); // stop progress bar on 78% just for demo
            var current = start;

            var countUp = function() {
                // increment by one during each function call
                current++;
                bar.css('width', current+'%');
                // update percents in html
                p.html(current + "%");
                // stop interval if we reached our goal (78%)
                if (current === end) {
                    clearInterval(interval);
                }
            };

            // change progress bar every 1000 / (78+1) milliseconds
            interval = setInterval(countUp, (2500 / (end + 1)));
    };                
});

Answer 1

您遇到的问题是什么？

如所写，代码的第二行将生成语法错误。你可能想要这样的东西：

if ($(document).scrollTop() >= 2500) {

Answer 2

我认为您应该在滚动事件回调中执行此操作，因为目前，您的内容在文档刚刚加载后执行一次，并且滚动为 0 ...

$(document).ready(function() {
    var $scroll = $('#scroll'),
        isLoading = false;
    $(document).on('scroll', function (e) {
        $scroll.text($(document).scrollTop());
        if ($(document).scrollTop() >= 2500) {
            if (!isLoading) {
                isLoading = true;
                $scroll.addClass('blue');
                var bar = $('.bar');
                var p = $('.percents');
                var interval;
                var start = 0; // start animation at 0%
                var end = parseInt(92); // stop progress bar on 78% just for demo
                var current = start;

                var countUp = function() {
                    // increment by one during each function call
                    current++;
                    bar.css('width', current+'%');
                    // update percents in html
                    p.html(current + "%");
                    // stop interval if we reached our goal (78%)
                    if (current === end) {
                        clearInterval(interval);
                        // isLoading = false; // uncomment if you want to load something again !
                    }
                };

                // change progress bar every 1000 / (78+1) milliseconds
                interval = setInterval(countUp, (2500 / (end + 1)));
            }
        } else {
            $scroll.removeClass('blue');  
        };
    });
});

你可以在这里看到一个 JSFiddle