图像已修复，但消失在 div 后面答案

【问题标题】：image fixed, but disappears behind div图像已修复，但消失在 div 后面
【发布时间】：2016-11-22 08:02:29
【问题描述】：

我正在寻找的效果可以在这里看到，其中fixed_header_middle消失在fixed_header_bottom后面。

$(document).ready(function() {
  $(window).bind("scroll", function(e) {
    if (!$('#fixed_header_bottom').hasClass('fixed')) {
      if ($(document).scrollTop() >= 100) {
        $('#fixed_placeholder').show();
        $('#fixed_header_bottom').addClass('fixed');
      }
    } else {
      if ($(document).scrollTop() < 100) {
        $('#fixed_placeholder').hide();
        $('#fixed_header_bottom').removeClass('fixed');
      }
    }
  });
});

* {
  margin: 0;
  padding: 0;
}
#fixed_header_top {
  display: block;
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: #DD33DD;
  top: 0;
}
#fixed_header_middle {
  display: block;
  width: 100%;
  height: 100px;
  background-color: #DDDD00;
  top: 50px;
  position: fixed;
  z-index: -1;
}
#fixed_header_bottom,
#fixed_placeholder {
  display: block;
  width: 100%;
  height: 50px;
  background-color: #11DD55;
}
#fixed_header_bottom {
  margin-top: 150px;
}
#fixed_placeholder {
  display: none;
}
.fixed {
  position: fixed;
  top: 50px;
  margin-top: 0!important;
}
#body_block {
  background: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fixed_header_top">fixed_header_top</div>
<div id="fixed_header_middle">fixed_header_middle</div>
<div id="fixed_header_bottom">fixed_header_bottom</div>
<div id="fixed_placeholder">Shouldn't see me</div>
<div id="body_block">BEGIN
  <br />
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />
  <br />END</div>

然而，在这个例子中，还有其他效果，例如 fixed_header_bottom 变得固定。

我只想知道如何在向下滚动时使固定元素消失在另一个元素后面。

【问题讨论】：

您没有添加示例，但我猜 css 中的 z-index 可能会有所帮助
对不起，我是 stackoverflow 的新手，所以请多多包涵 :-) 你现在能看到链接吗？
认为您对 z-index 的看法可能是对的。要调查一下。谢谢！
改变这个 z-index: -1;到更高的数字而不是 -1
还有一个问题..所以效果应该在背景图片上起作用，这是通过css实现的，那么如何添加z-index效果？

标签： javascript jquery html css

【解决方案1】：

如果我得到你想要的，z-index 就是你要找的...... 它控制元素的覆盖.. 见下面的代码

$(document).ready(function() {
  $(window).bind("scroll", function(e) {
    if (!$('#fixed_header_bottom').hasClass('fixed')) {
      if ($(document).scrollTop() >= 100) {
        $('#fixed_placeholder').show();
        $('#fixed_header_bottom').addClass('fixed');
      }
    } else {
      if ($(document).scrollTop() < 100) {
        $('#fixed_placeholder').hide();
        $('#fixed_header_bottom').removeClass('fixed');
$('#fixed_header_bottom').css('z-index', -1);
      }
    }
  });
});

* {
  margin: 0;
  padding: 0;
}
#fixed_header_top {
  display: block;
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: #DD33DD;
  top: 0;
}
#fixed_header_middle {
  display: block;
  width: 100%;
  height: 100px;
  background-color: #DDDD00;
  top: 50px;
  position: fixed;
  z-index: -1;
}
#fixed_header_bottom,
#fixed_placeholder {
  display: block;
  width: 100%;
  height: 50px;
  background-color: #11DD55;
}
#fixed_header_bottom {
  margin-top: 150px;
}
#fixed_placeholder {
  display: none;
}
.fixed {
  position: fixed;
  top: 50px;
  margin-top: 0!important;
}
#body_block {
  background: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fixed_header_top">fixed_header_top</div>
<div id="fixed_header_middle">fixed_header_middle</div>
<div id="fixed_header_bottom">fixed_header_bottom</div>
<div id="fixed_placeholder">Shouldn't see me</div>
<div id="body_block">BEGIN
  <br />
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />Bottom
  <br />
  <br />END</div>

【讨论】：

所以我找到了这个madebydaryl.co.uk 这就是我希望背景工作的方式..
请注意，效果并不适用于他的标题中的每个元素..“制造者..”不是固定的..