如何让容器从上到下滚动

Question

我想实现这样的html效果：

来自this website

图像从上到下滚动显示，很酷。

但我的工具是：

http://codepen.io/devbian/pen/dXOvGj

<div class="container container0">
  <img src='http://special.porsche.com/microsite/mission-e/assets/images/content/reveal/intro/intro-01.jpg' class='fixed'/>
</div>

<div class="container container1">
  <img src="http://special.porsche.com/microsite/mission-e/assets/images/content/reveal/intro/intro-02.jpg" class="moveable">
</div>

<div class="container container2">
  <img src="http://special.porsche.com/microsite/mission-e/assets/images/content/reveal/intro/intro-04.png" class="moveable">
</div>

<div class="container container3">
  <img src="http://special.porsche.com/microsite/mission-e/assets/images/content/reveal/intro/intro-05.jpg" class="moveable">
</div>




* {
  padding: 0;
  margin: 0;
}

body{
  min-height:2000px;
}

.container {
  overflow: hidden;
  padding: 10px;
  position: relative;
  min-height: 300px;
}

.container img{
  width:100%;
  height:300px;
}

/* .container0 {
  background-color: #e67e22;
}
.container1 {
  background-color: #ecf0f1;
}
.container2 {
  background-color: #f39c12;
}
.container3 {
  background-color: #1abc9c;
} */

.fixed {
  position:fixed;
}
.moveable {
  position:absolute;
}


$(function() {
  function setLogo() {
    $('.moveable').each(function() {
    $(this).css('top',
      $('.fixed').offset().top -  $(this).closest('.container').offset().top
    );
  });
  }  
  $(window).on('scroll', function() {
     setLogo();
  });
  setLogo();
})

这是从下到上。

如何通过滚动从上到下更改图像？

Answer 1

Plunker

以下是我从上到下做的工作：

• 定位 - 每张汽车幻灯片都有position: absolute，并以bottom: 0%开头，滚动时会慢慢显示幻灯片，转到bottom: 100%。例外情况是从左到右发生的第三次转换，从left: -100%转移到left: 0%。
• 当前幻灯片 - 当前幻灯片是通过获取滚动位置并将其除以视图高度然后向下舍入，如Math.floor( scrollTop / height )来计算的。
• 当前幻灯片百分比 - 每个幻灯片转换的当前百分比（用于转换bottom和left样式）的计算方法是获取超出的像素数量当前幻灯片位置使用var partPixels = scrollTop % height;，然后将其除以视图高度，并将结果转换为此(partPixels / height) * 100的百分比。

然后只需在滚动位置发生变化时用相关样式更新DOM。

完整代码

window.onload = function() {  
  var scrollTop, currentIndex, partPercentage, height, totalHeight;
  var stylesLastUpdate = {};
  var elementsCache = {
    partWrapper: document.getElementById("part-wrapper"),
    spacer: document.getElementById("spacer"),
    segment: document.getElementById("segment")
  };
  var whiteBackgrounds = document.getElementsByClassName('part-background-light');
  var wbLength = whiteBackgrounds.length;
  var partElements = elementsCache.partWrapper.getElementsByClassName("part");
  var partsLength = partElements.length;
  var specialIndex = 3;
  partsLength += 1;
  for (var i = 0; i < partsLength; i++) {
    if (i < specialIndex) {
      elementsCache[i] = partElements[i];
    }
    else {
      elementsCache[i] = partElements[i-1];
    }
  }

  resize();
  onScroll();
  document.addEventListener("scroll", onScroll);
  window.addEventListener("resize", resize);

  function onScroll() {
    scrollTop = document.body.scrollTop;
    if (scrollTop > totalHeight) {
      elementsCache.segment.classList.remove("fixed");
    }
    else {
      elementsCache.segment.classList.add("fixed");
    }
    currentIndex = Math.floor( scrollTop / height );
    var partPixels = scrollTop % height;
    partPercentage = (partPixels / height) * 100;
    updateDom();
  }

  function updateDom() {
    var nextIndex = currentIndex + 1;
    for (var i = 0; i < partsLength; i++) {
      if (i === currentIndex && nextIndex < partsLength) {
        if (currentIndex !== (specialIndex-1)) {
          updateStyle(nextIndex, 'bottom:' + (100 - partPercentage) + '%;display:block');
        }
      }
      if (i <= currentIndex) {
        updateStyle(i, 'bottom:0%; display: block');
      }
      if (i > nextIndex) {
        updateStyle(i, 'bottom:100%; display: none');
      }
    }
    updateWhiteBackgrounds();
  }

  function updateStyle(index, newStyle) {
    if (!(index in stylesLastUpdate) || stylesLastUpdate[index] !== newStyle) {
      stylesLastUpdate[index] = newStyle;
      elementsCache[index].style.cssText = newStyle;
    }
  }

  function updateWhiteBackgrounds() {
    var wbPercentage = -100; // default
    if (currentIndex === (specialIndex-1)) {
      wbPercentage = -100 + partPercentage;
    }
    else if (currentIndex > (specialIndex-1)) {
      wbPercentage = 0;
    }
    var newStyle = 'left:' + wbPercentage + '%;display:block';
    if (!('whiteBackgrounds' in stylesLastUpdate) || stylesLastUpdate['whiteBackgrounds'] !== newStyle) {
      for (var m = 0; m < wbLength; m++) {
        whiteBackgrounds[m].style.cssText = newStyle;
      }
    }
  }

  function resize() {
    height = elementsCache.partWrapper.clientHeight;
    totalHeight = height * (partsLength-1);
    updateStyle('spacer', 'padding-top:' + totalHeight + 'px')
  }

}

body {
    margin: 0;

}
.special-scroll {
    padding-top: 1567px;
}

.segment {
    margin: auto;
    top: 0px;
    left: 0px;
    bottom: auto;
    right: auto;
}
.segment.fixed {
    position: fixed;
}

.animation-sequence {
    background-color: black;
}

.part-spacer {
    height: 15vh;
    position: relative;
}
.part-background-dark {
    background-color: black;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    

}
.part-background-light {
    background-color: white;
    position: absolute;
    width: 100%;
    height: 100%;
    left: -100%;
    top: 0;
    
}


.part-wrapper {
    position: relative;
}
.part {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 100%;
    overflow: hidden;
    display: none;
}
.part-0 {
    position: relative;
    display: block;
}
.part-2 img {
    position: absolute;
}
.part img {
    width: 100%;
}
.content {
    min-height: 2000px;
}

<!-- special-scroll -- start -->
    <div class="special-scroll" id="spacer">
      <div class="segment fixed" id="segment">
        <div class="animation-sequence">
          <div class="part-spacer spacer-top">
            <div class="part-background-light"></div>
          </div>
          
          <div class="part-wrapper" id="part-wrapper">
            <div class="part part-0">
              <img src="http://i.imgur.com/B6fq5d3.jpg">
            </div>
            <div class="part part-1">
              <img src="http://i.imgur.com/pE44BJ8.jpg">
            </div>
            <div class="part part-2">
              <div class="part-background-dark"></div>
              <div class="part-background-light"></div>
              <img src="http://i.imgur.com/U7bEh2I.png">
            </div>
            <div class="part part-4">
              <img src="http://i.imgur.com/HSNVbkR.jpg">
            </div>
            <div class="part part-5">
              <img src="http://i.imgur.com/1OGlaDI.jpg">
            </div>
            <div class="part part-6">
              <img src="http://i.imgur.com/CuTgGME.jpg">
            </div>
          </div>

          <div class="part-spacer spacer-bottom">
            <div class="part-background-light"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- special-scroll -- end -->
    <div class="content">
    </div>