scrollTop重叠div

Question

我启用了javascript，正在寻求帮助。

我想找到一个解决方案，在页面滚动时使div保持固定，并且它下面的div重叠并产生相反的效果。

我研究了一些事情并设法得到了下面的例子，但是在返回div时行为不正确。

$(window).scroll(function() {

  if ($(this).scrollTop() > 10) {
    $('.primeira').css({
      "position": "fixed"
    });
    $('.segunda').css({
      "margin-top": "650px"
    });
  }

  if ($(this).scrollTop() > 650) {
    $('.segunda').css({
      "position": "fixed"
    });
    $('.segunda').css({
      "margin-top": "0px"
    });
    $('.terceria').css({
      "margin-top": "1300px"
    });
  }

  if ($(this).scrollTop() > 1300) {
    $('.terceria').css({
      "position": "fixed"
    });
    $('.terceria').css({
      "margin-top": "0px"
    });
  }

  if ($(this).scrollTop() > 1900) {
    $('.quarta').css({
      "position": "fixed"
    });
    $('.quarta').css({
      "margin-top": "0px"
    });
  }
});

body {
  height: 5000px;
}

.primeira {
  width: 100%;
  height: 600px;
  background: url(https://static0.srcdn.com/wp-content/uploads/2017/02/Avengers-Infinity-War-cast.jpg);
  position: absolute;
}

.segunda {
  width: 100%;
  height: 600px;
  background: url(https://rd1.com.br/wp-content/uploads/2015/04/Imagem-do-Homem-Aranha.jpg);
  position: absolute;
  margin-top: 650px;
}

.terceria {
  width: 100%;
  height: 600px;
  background: url(https://s.aficionados.com.br/imagens/as-frases-mais-hilarias-de-deadpool_f.jpg);
  position: absolute;
  margin-top: 1300px;
}

.quarta {
  width: 100%;
  height: 600px;
  background: url(https://cdn.wccftech.com/wp-content/uploads/2016/12/Batman-Arkham.jpg);
  position: absolute;
  margin-top: 1900px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="primeira">Test 1</div>
<div class="segunda">Test 2</div>
<div class="terceria">Test 3</div>
<div class="quarta">Test 4</div>

Answer 1

好主意！要实现此目的，您需要检测滚动方向并在向上滚动时更改css。看看这个：

var lastScrollTop = 0;
$(window).scroll(function() {

  var st = $(this).scrollTop();
  var up = st < lastScrollTop;
  lastScrollTop = st;

  if ($(this).scrollTop() > 10) {
    $('.primeira').css({
     "position": up ? "absolute" : "fixed"
    });
    $('.primeira').css({
      "margin-top": up ? st + "px" : "0px"
    });
  }

  if ($(this).scrollTop() > 650) {
    $('.segunda').css({
      "position": up ? "absolute" : "fixed"
    });
    $('.segunda').css({
      "margin-top": up ? st + "px" : "0px"
    });
  } 

  if ($(this).scrollTop() > 1300) {
    $('.terceria').css({
      "position": up ? "absolute" : "fixed"
    });
    $('.terceria').css({
      "margin-top": up ? st + "px" : "0px"
    });
  } 

  if ($(this).scrollTop() > 1900) {
    $('.quarta').css({
      "position": up ? "absolute" : "fixed"
    });
    $('.quarta').css({
      "margin-top": up ? st + "px" : "0px"
    });
  }
});

body {
  height: 5000px;
}

.primeira {
  width: 100%;
  height: 600px;
  background: url(https://static0.srcdn.com/wp-content/uploads/2017/02/Avengers-Infinity-War-cast.jpg);
  position: absolute;
}

.segunda {
  width: 100%;
  height: 600px;
  background: url(https://rd1.com.br/wp-content/uploads/2015/04/Imagem-do-Homem-Aranha.jpg);
  position: absolute;
  margin-top: 650px;
}

.terceria {
  width: 100%;
  height: 600px;
  background: url(https://s.aficionados.com.br/imagens/as-frases-mais-hilarias-de-deadpool_f.jpg);
  position: absolute;
  margin-top: 1300px;
}

.quarta {
  width: 100%;
  height: 600px;
  background: url(https://cdn.wccftech.com/wp-content/uploads/2016/12/Batman-Arkham.jpg);
  position: absolute;
  margin-top: 1900px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="primeira">Test 1</div>
<div class="segunda">Test 2</div>
<div class="terceria">Test 3</div>
<div class="quarta">Test 4</div>