Question

在此代码的各个点上，我试图将pixelsSearchMoved增加1.目前，根据console.log，它被卡在0。

我知道它停留在0，因为其他条件中要求它为1或更大的代码没有被执行。

如何让该变量增加？

var lastScrollTop = 0;
$(window).scroll(function(){
    var st = $(this).scrollTop();
    if (st <= lastScrollTop) {
        if (!isElementInViewport(document.getElementById('header'))) {
            var pixelsSearchMoved = 0;
            var pixelsScrollMoved = $(this).scrollTop();
            while (pixelsSearchMoved <= 18) {
                var last_pixelsScrollMoved = pixelsScrollMoved;
                pixelsScrollMoved = $(this).scrollTop();
                if(pixelsSearchMoved === 0){
                    $('#searchInput').addClass('slideBack').css('top', '-22px');
                    console.log('pixelsSearchMoved is:'+pixelsSearchMoved);
                    pixelsSearchMoved++;
                }
                else if (pixelsSearchMoved === 1) {
                    var x = '-22px';
                    $('#searchInput').css('top', parseFloat(x)+3+'px');
                    pixelsSearchMoved++;
                }
                if (pixelsSearchMoved > 1 && (last_pixelsScrollMoved = pixelsScrollMoved + 1)) {
                    var x = $('#searchInput').css('top');
                    $('#searchInput').css('top', parseFloat(x)+3+'px');
                    console.log('moved up one!');
                    pixelsSearchMoved++;
                }
                break;
            }
            $('#headerTopBar').css('position', 'fixed').css('top', '0').fadeIn();
        }
        else {
            console.log('header in viewport');
        }
    }
    lastScrollTop = st;
});

Answer 1

您必须从循环中删除break语句。它首次执行后会中断循环。

Answer 2

以下是我注意到的问题：

var lastScrollTop = 0;
$(window).scroll(function () {
    var st = $(this).scrollTop();
    if (st <= lastScrollTop) {
        if (!isElementInViewport(document.getElementById('header'))) {
            // here you set pixelsSearchMoved = 0
            var pixelsSearchMoved = 0;
            var pixelsScrollMoved = $(this).scrollTop(); // use st instead
            // 0 is always <= 18
            while (pixelsSearchMoved <= 18) {
                var last_pixelsScrollMoved = pixelsScrollMoved;
                pixelsScrollMoved = $(this).scrollTop(); // use st instead
                // this first condition is always true because you explicitly set pixelsSearchMoved to 0 above
                if (pixelsSearchMoved === 0) {
                    $('#searchInput').addClass('slideBack').css('top', '-22px');
                    console.log('pixelsSearchMoved is:' + pixelsSearchMoved);
                    // here you increment, but it's useless as the other conditions will never be executed
                    // and you explicitly drop out of your loop below
                    pixelsSearchMoved++;
                }
                // this will never execute as you are not updating the value before the comparison
                else if (pixelsSearchMoved === 1) {
                    var x = '-22px';
                    $('#searchInput').css('top', parseFloat(x) + 3 + 'px'); // parseFloat('-22px') will always be -22, just use a static string instead
                    pixelsSearchMoved++;
                }
                // the below will never execute as you've set last_pixelsScrollMoved = pixelsScrollMoved above
                // so it can never be last_pixelsScrollMoved = (pixelsScrollMoved + 1)
                // also, = is an assignment, == or === are comparisons
                if ((pixelsSearchMoved > 1) && (last_pixelsScrollMoved = pixelsScrollMoved + 1)) {
                    var x = $('#searchInput').css('top');
                    $('#searchInput').css('top', parseFloat(x) + 3 + 'px');
                    console.log('moved up one!');
                    pixelsSearchMoved++;
                }
                // drops you out of your loop
                break;
            }
            $('#headerTopBar').css('position', 'fixed').css('top', '0').fadeIn();
        } else {
            console.log('header in viewport');
        }
    }
    lastScrollTop = st;
});

如果您可以发布fiddle重现问题，我们可以提供更多见解。

无法重新分配或增加变量（浮点）

2 个答案: