Question

我有视差滚动元素的问题。

$(window).scroll(function() {

  var wScroll = $(this).scrollTop();

  $('.eboy').css({
    'transform': 'translate(0px, ' + wScroll / 12 + '%)'
  });


});

.section1 {
  width: 100%;
  padding: 0;
  margin: 0;
  height: auto;
  position: relative;
  height: 800px;
  background-image: url("../images/head.png");
  size: auto 600px;
  position: top-center;
  background-attachment: fixed;
  overflow: hidden;
}

.section1 img {
  width: 100%;
  height: auto;
}

.eboy {
  width: 900px;
  height: 300px;
  background-image: url("../images/eboy.png");
  background-repeat: no-repeat;
  background-position: bottom;
  position: absolute;
  margin-right: 50%;
  margin-top: 5%;
}

.eboy2 {
  width: 1100px;
  height: 300px;
  background-image: url("../images/eboy.png");
  background-repeat: no-repeat;
  background-position: bottom right;
  position: absolute;
  margin-right: 40%;
  margin-top: 5%;
  z-index: -100;
}

.section2 {
  width: 100%;
  padding: 0;
  margin: 0;
  height: auto;
  position: relative;
  height: 646px;
  background-image: url("../images/dobrodosli01.png");
  size: contain;
  position: top-center;
  z-index: -100;
}

.section2 img {
  width: 100%;
  height: auto;
}

.section3 {
  height: 200px;
  background-image: url("../images/kapija.png");
  z-index: 100;
}

.section3 img {
  position: relative;
  left: 0px;
  top: 0px;
  z-index: 100;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
  <div class="container-fluid">
    <div class="section1">
      <img src="images/Untitled-1.png" alt="" class="img-responsive">
    </div>
  </div>
  <div class="section2">
    <div class="eboy" id="eboy">
      <div class="eboy2">
      </div>
    </div>
  </div>
</header>

一开始，当我滚动时，一切正常：它移动.eboy和.eboy2。但是在1000px滚动之后，我想修复#eboy2，并继续只移动背景。所以我想要做的是将eBoy2固定在页面中间，并且它周围应该传递一些元素。我怎么能这样做？

Answer 1

$(window).scroll(function(){

var wScroll = $(this).scrollTop();


if($(window).scrollTop() > 800){


    $(".eboy").css({"transform" :  "translateY(0px)"});
    $(".eboy").css("margin-top", wScroll-600+"px");

}
else{
     $('.eboy').css({
  'transform' : 'translate(0px, '+ wScroll /12 +'%)'
});
     $(".eboy").css("margin-top", "0px");
}

});

最后这是我的问题的解决方案，所以maby这个答案对某人有帮助。

Answer 2

我不太了解你的要求，但听起来你需要做的就是使用js检查滚动的距离，然后在1000px时将其位置设置为固定。

检查距离滚动：

$(window).scroll(function() {

    //if I scroll more than 1000px...
    if($(window).scrollTop() > 1000){

        //Then change the elements position to fixed:
        $("#element").css("position", "fixed"); 
    }
});

如果你创建一个jsFiddle，我很乐意帮助

视差滚动 - 在

2 个答案: