Javascript 如何使固定元素位于非固定元素后面

我有三个元素是固定的，当它们到达页面中的某个部分时，我希望它们转换到下一个元素，而不仅仅是消失和更改。在分界处，我希望能够看到顶部固定元素的一半和底部固定元素的一半。如果顶部元素是红色，底部元素是蓝色，那么在分界处，我应该看到一个有一半红色和一半蓝色的框

这是我到目前为止得到的，但是现在每个元素都消失了，我希望它看起来像是在下一个固定元素下滑动。（我弄乱了z索引，但这个解决方案不起作用b/c两个项目都固定在同一个位置）

HTML:

JS

$（'#某物'）.hide（）；
$（'something2'）.hide（）；
$（'something3'）.hide（）；
$（文档）。滚动（函数（）{
if（$（文档）.scrollTop（）<700）{
$（“#某物”）.hide（）；
$（'something2'）.hide（）；
$（'something3'）.hide（）；
}如果（$（document.scrollTop（）>700&$（document.scrollTop（）<1580），则为else{
$（'something3'）.show（）；
$（'something2'）.hide（）；
$（“#某物”）.hide（）；
}else if（$（document.scrollTop（）>1580&&$（document.scrollTop（）<2490）{
$（'something2'）.show（）；
$（'something3'）.hide（）；
$（“#某物”）.hide（）
}else if（$（文档）.scrollTop（）>2490）{
$（'something2'）.hide（）；
$（'某物'）.show（）
}
});

以下是

创建一个整体容器，并将该容器设置为

overflow:hidden
然后将fixedContainer设置为
位置：绝对
。jquery部分始终将所有
fixedContainer
保持在窗口顶部

HTML:

Javascript

$(document).scroll(function() {
    var $target = $('container');
  var winHeight = $(window).scrollTop();
  var offsetArr = $('.container').each(function(){
    var top = $(this).offset().top;
    var difference = winHeight - top;
    $(this).find('.fixedContainer').css('top',difference);
  })

});

您可能需要更改代码，使其不被隐藏，并根据悬垂的程度更改高度。@epascarello，删除jQuery没有问题。你能给悬挑下定义吗？我不明白。非常感谢。这是我想要的90%。唯一的问题是，这个盒子被粘在了div的顶部。我真的想要坐在中间的固定效果。我现在正在修补你的JSFIDLE，看看我是否能找出最后一块；到.fixedContainer，它完成了任务。再次感谢斯坦利
#background {
  height: 900px;
  background-color: black;
  z-index: 1;
}

#red {
  height: 900px;
  background-color: red;
}

#blue {
  height: 900px;
  background-color: blue;
}

#green {
  height: 900px;
  background-color: green;
}

.fixedContainer {
  z-index: 10;
  position: fixed;
  background-color: #ddd;
  padding: 2em;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.fixedContainer2 {
  z-index: 5;
  position: fixed;
  background-color: #ffff00;
  padding: 2em;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.fixedContainer3 {
  position: fixed;
  background-color: #dd1144;
  padding: 2em;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

$('#something').hide();
$('#something2').hide();
$('#something3').hide();

$(document).scroll(function() {
  if ($(document).scrollTop() < 700) {
    $('#something').hide();
    $('#something2').hide();
    $('#something3').hide();
  } else if ($(document).scrollTop() > 700 && $(document).scrollTop() < 1580) {
    $('#something3').show();
    $('#something2').hide();
    $('#something').hide();
  } else if ($(document).scrollTop() > 1580 && $(document).scrollTop() < 2490) {
    $('#something2').show();
    $('#something3').hide();
    $('#something').hide()
  } else if ($(document).scrollTop() > 2490) {
    $('#something2').hide();
    $('#something').show()
  }
});

  <div id="background">
  </div>

  <div id="red" class="container">
    <div class="fixedContainer" id="something">
      This is Just a test
    </div>
  </div>

  <div class="mdl-grid container" id="blue" >
    <div class="fixedContainer" id="something2">
      This is Just a test2
    </div>
  </div>

  <div class="mdl-grid container" id="green">
    <div class="fixedContainer" id="something3">
      This is Just a test3
    </div>
  </div>

#background {
    height:900px;
    background-color: black;
    z-index: 1;
}
.container{
    position:relative;
    height:900px;
    overflow:hidden;
}
#red {
    background-color: red;
}

#blue {
    background-color: blue;
}

#green {
    background-color: green;
}

.fixedContainer {
    z-index: 10;
    position:absolute;
    background-color:#ddd;
    padding: 2em;
    left: 50%;
    top: 0;
    transform: translate(-50%);
}

$(document).scroll(function() {
    var $target = $('container');
  var winHeight = $(window).scrollTop();
  var offsetArr = $('.container').each(function(){
    var top = $(this).offset().top;
    var difference = winHeight - top;
    $(this).find('.fixedContainer').css('top',difference);
  })

});