Question

当我在第一个div的视差中使用滚动时，下一个div被按下。它背叛蓝色背景。我该如何解决？

$(window).scroll(function() {
  var wScroll = $(this).scrollTop();

  $('.parent .mid .main-slide').css({
    'transform': 'translate(0px, -' + wScroll / 10 + '%)'
  });



});

.parent {
  width: 100%;
}
.parent .header {
  width: 100%;
}
/*menu-first*/

.parent .header .menu-first {
  width: 100%;
  color: #fff;
  height: 40px;
  line-height: 30px;
  background: #dc6453;
  border-top: solid 5px #bf6053;
}
.parent .header .menu-first .contact {
  float: left;
  width: 45%;
  margin-left: 10%;
}
.parent .header .menu-first .contact ul li {
  float: left;
  margin: 1%;
}
.parent .header .menu-first .search-box {
  float: right;
  width: 41%;
  padding: 1%;
}
.parent .header .menu-first .search-box .hotline,
.txt-search,
.cart-stt {
  float: left;
  margin-left: 5%;
}
/*/////////////////////////menu-second///////////////////////*/

.parent .header .menu-second {
  width: 100%;
  height: 100px;
  line-height: 100px;
}
.parent .header .menu-second .logo {
  float: left;
  width: 40%;
  margin-left: 10%;
}
.parent .header .menu-second .menu-prod {
  float: left;
  width: 40%;
  margin-right: 10%;
}
.parent .header .menu-second .menu-prod ul li {
  float: left;
  margin-left: 3%;
}
/*///////////////////MID/////////////*/

.parent .mid {
  width: 100%;
  background: blue;
}
.parent .mid .main-slide {
  width: 100%;
  height: 700px;
  background-attachment: fixed;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}
.parent .mid .main-slide .title-slide {
  font-size: 10px;
}
.parent .mid .main-prod {
  width: 100%;
}
.parent .mid .main-prod .prod-left,
.prod-right {
  width: 100%;
  height: 300px;
  position: relative;
  background-attachment: fixed;
  background-position: center 0px;
  background-repeat: no-repeat;
  background-size: auto 100%;
}
.parent .mid .main-prod .prod-left .content-prod-left {
  color: #fff;
}

<body>
  <div class="parent">
    <div class="header">
      <div class="menu-first">
        <div class="contact">
          <ul>
            <li>Contact</li>
            <li>About</li>
            <li>Map</li>
            <li>Help</li>
          </ul>
        </div>

        <div class="search-box">
          <div class="hotline">08-999-9999</div>
          <div class="txt-search">
            <input type="text" placeholder="Search" />
          </div>
          <div class="cart-stt">Cart</div>
        </div>

      </div>
      <div class="menu-second">
        <div class="logo">LOGO CONG TY</div>
        <div class="menu-prod">
          <ul>
            <li>Product 1</li>
            <li>Product 2</li>
            <li>Product 2</li>
            <li>Product 2</li>
            <li>Product 2</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="mid">
      <div class="main-slide" style="background-image: url(http://static.livedemo00.template-help.com/woocommerce_54050/wp-content/uploads/2015/05/bg_pic.jpg);">
        <div class="title-slide">
          A comprehensive quality control for customer satisfaction!
          <br />Reliable transportation is guaranteed!

        </div>
      </div>

      <div class="main-prod" style="background-image: url(http://livedemo00.template-help.com/woocommerce_54050/wp-content/uploads/2015/05/bg_pic2.jpg);">
        <div class="prod-left">
          <div class="content-prod-left">
            Content here!
          </div>
        </div>

      </div>

    </div>

  </div>


</body>

滚动视差工作不正确？

0 个答案: