Question

我试图在滚动上设置div的动画。重点是div的宽度必须增长，直到达到80vw并停止。这确实发生了，但即使未满足＆gt; = 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来计算下一个滚动步骤。相反，我做了一个单一的缩放函数，无论如何都被调用。滚动百分比的值乘以步长因子，并将其添加到ORIGINAL元素宽度。通过这样做，我并不担心我在滚动之前的位置，只是我现在的位置。

因此我将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 -->

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

1 个答案: