条件が満たされなくても変数が増加し続ける

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

これが再訪されました。まず、コードはすべてスパゲッティでした。第二に、本当に機能の重複がありました。スクロールアップの機能とスクロールの機能があり、最後のスクロールトップを使用して次のスクロールステップを計算していました。代わりに、私は無関係に呼び出される単一のスケール関数を作成しました。スクロールされたパーセンテージの値にステップ係数が乗算され、ORIGINAL要素の幅に加算されます。これを行うことで、スクロールの直前のどこにいたのか心配しなくても、今のところどこにいるのか分かりません。

私はscaleWidthElをオブジェクトコンストラクタにして、単純にnaranja divをラップしました。変更が他の何かに影響を与えずに行うことができるように、

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

残りは自己完結型である：実際のコードは、それが最初の3行で作成する、とまで減少させることができました。正確 `naranjaWidth`が定義されている

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 -->