javascript - 即使条件不满足，变量也会持续增长

Question

我正在尝试为滚动的 div 制作动画。要点是 div 的宽度必须增长直至达到 80vw 并停止。这种情况确实发生了，但即使不满足 >=outerWidth*0.8 条件，我的变量也会继续增长(它被记录到控制台)。因此，每当我达到 80vw 并向上然后向下滚动时，宽度就会变为 Xvw。

$(window).on('scroll',function(){
    var scrollTop = $(this).scrollTop();
    var outerHeight = $(this).outerHeight();
    var outerWidth = $(this).outerWidth();
    var scrollBottom = scrollTop + outerHeight;
    var scrollTop = $(this).scrollTop();


    console.log( growNaranja );
    if (scrollTop > lastScrollTop){ // scroll down
        if( naranjaWidth <= (outerWidth*0.8)  ){
            growNaranja = (naranja.outerWidth()*100) / outerWidth;
            growNaranja = growNaranja+(scrollTop*0.05);
            $('.grow.naranja').css( 'width', growNaranja + 'vw' );
        }
    } else { // scroll up
        if( naranjaWidth >= (outerWidth*0.1)  ){
            growNaranja = (naranja.outerWidth()*100) / outerWidth;
            $('.grow.naranja').css( 'width', growNaranja + 'vw' );
            growNaranja = growNaranja - ((lastScrollTop-scrollTop)*0.05);
            $('.grow.naranja').css( 'width', growNaranja + 'vw' );
        }
    }

    lastScrollTop = scrollTop;
});

您可以看到一个工作示例 here .

Answer 1

重温了一下这个，我很烦恼。首先，代码完全是意大利面条。其次，确实存在功能重复。您有一个向上滚动的函数和一个向下滚动的函数，并且您使用最后一个scrollTop 来计算下一个滚动步骤。相反，我创建了一个无论如何都会被调用的缩放函数。滚动百分比的值乘以步长因子，然后添加到原始元素宽度。通过这样做，我不担心滚动之前我在哪里，只担心我现在在哪里。

所以我将scaleWidthEl设置为一个对象构造函数，并简单地将naranja div包装在其中。创建它的实际代码是前三行，可以简化为:

var scaleNaranja = new ScaleWidthEl($('.grow.naranja'), 0.8);

其余部分是独立的，允许进行更改而不影响其他任何内容。

var maxElScale = 0.8;
var naranja = $('.grow.naranja');

var scaleNaranja = new ScaleWidthEl(naranja, maxElScale);



/***
 *  The rest of this is a black-box function, walled away from the main code
 * It's a personal peeve of mine that code gets garbled otherwise.
 ***/
function ScaleWidthEl(el, maxScale) {
  // I don't need a minScale, as I use the initial width for that
  this.el = el;
  this.vwConversion = (100 / document.documentElement.clientWidth);
  this.startingWidth = el.outerWidth();
  this.maxScale = maxScale;
  this.max = $(window).outerWidth() * this.maxScale;
  this.step = (this.max - this.startingWidth) / $(window).outerHeight();
  // for the sake of clarity, store a reference to `this` for
  //  any nested functions.
  var that = this;

  /**
   * function scaleEl
   *   handle the actual scaling of the element.
   *   Using a given step, we will simply add that
   *   to the element's current width, then update the CSS
   *   width property of the element.
   **/
  this.scaleEl = function() {
    // First, calculate the percentage of vertical scroll
    var winheight = $(window).height();
    var docheight = $(document).height();
    var scrollTop = $(window).scrollTop();
    var trackLength = docheight - winheight;
    // gets percentage scrolled (ie: 80 NaN if tracklength == 0)
    var pctScrolled = Math.floor(scrollTop / trackLength * 100);
//    console.log(pctScrolled + '% scrolled')

    // Now, using the scrolled percentage, scale the div
    var tempWidth = this.startingWidth * this.vwConversion;
    tempWidth += pctScrolled * this.step;
    // I want to fix the max of the scale
    if (tempWidth > (this.maxScale * 100)) {
      tempWidth = this.maxScale * 100;
    }
    this.el.css('width', tempWidth + 'vw');
  };


  $(window).on("scroll", function() {
    that.scaleEl();
  }).on("resize", function() {
    /**
     * In the case of a resize, we should
     *  recalculate min, max and step.
     **/
    that.min = $(window).outerWidth() * that.minScale;
    that.max = $(window).outerWidth() * that.maxScale;
    that.step = (that.max - that.min) / $(window).outerHeight();
  })
}

body {
  height: 10000px;
}

.grow {
  position: fixed;
  height: 100vh;
  top: 0;
  left: 0;
}

.grow.gris {
  width: 35vw;
  z-index: 2;
  background: silver;
}

.grow.naranja {
  width: 10vw;
  z-index: 1;
  background: orange;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"  crossorigin="anonymous"></script>
<div class="grow naranja"></div>
<!-- .naranja -->