视差缩小效果问题

Question

我正在尝试使用视差并尝试在滚动条上进行精彩缩放，但我正在努力使图像变得小于浏览器宽度和div的高度。

正如您在我的示例中所看到的，当您向下滚动时，包装器部分的红色背景可见。

您可以在www.adamkhourydesign.com/test

上查看该示例

HTML

<header id="header_container">
    <div class="header_back"></div>
    <div class="logo"></div>
</header>

CSS

#header_container {
  position: relative;
  height: 600px;
  background-color: rgba(255, 100, 85, 0.5);
  background-repeat: no-repeat;
  background-size: auto 800px;
  background-position: top center;
  background-attachment: fixed;
  overflow: hidden;
}

.logo {
  height: 100px;
  width: 100%;
  background-image: url(../img/name.png);
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  margin-top: -50px;
}

.header_back {
  position: relative;
  height: 600px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  background-attachment: fixed;
  background-image: url(../img/header_bg.jpg);
  overflow: hidden;
}

的jQuery

var pContainerHeight = $('#header_container').height();

$(window).scroll(function(){

  var wScroll = $(this).scrollTop();
  var wZoomIn = 1+(wScroll*.0005);
  var wZoomOut = 1-(wScroll*.00005);

  if (wScroll <= pContainerHeight) { 
    $('.header_back').css({
      'transform' : 'scale('+ wZoomOut +')'
    });
    $('.logo').css({
      'transform' : 'translate(0px, '+ wScroll /0.7 +'%)'
    });
  }