Question

我一直在尝试创建一个效果，以便当您在浏览器中滚动时， Div1 部分不会仅移动下一部分 Div2 将向上移动涵盖 Div1 部分。然后当 Div2 部分点击浏览器边缘的顶部时， Div2 将停止移动，然后下一部分将向上移动并覆盖它，依此类推。

body {
  padding-top: 180px;
}
div {
  background: #fff;
  padding: 50px;
  height: 80px;
  position: relative;
  top: 10;
}
div:first-child {
  position: fixed;
  top: 0;
}
div:nth-child(even) {
  background: black;
  color: #fff;
}

<div id="div1">
  <h1>Div1</h1>
</div>
<div id="div2">
  <h1>Div2</h1>
</div>
<div id="div3">
  <h1>Div3</h1>
</div>
<div id="div4">
  <h1>Div4</h1>
</div>
<div id="div5">
  <h1>Div5</h1>
</div>

我已经设法通过CSS实现第一部分的效果，但它似乎不是一个正确的解决方案。所以我希望有人能帮我在滚动事件中用jQuery创建这种效果吗？

Answer 1

所以这样的东西会起作用，但你会失去背景颜色。

主要问题是，每次将div设置为固定位置时，它都不再是滚动区域的一部分。

只需滚动窗口就应该有办法实现这一点，我会让它成为你的第2部分。

＆＃13;

$(".scroll").scroll(function() {
  $('.fixed').empty();
  $('.scroll').children().each(function(index, element) {
    if ($(element).offset().top < 0) {
      $('.fixed').empty();
      $('.fixed').append(
        $(element).clone()
      );
    }
  });
});

＆＃13;

body {
padding: 0px;
  margin: 0px;
}
.scroll {
  max-height: 100vh;
  max-width: 100vw;
  overflow: auto;
}
.scroll > div {
  background: #fff;
  padding: 50px 0px;
  height: 80px;
  position: relative;
  top: 10;
  color: black;
  width 100%;
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: #fff;
  padding: 50px 0px;
  color #000;
}
.scroll > div:nth-child(even) {
  background: black;
  color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroll">
  <div id="div1">
    <h1>Div1</h1>
  </div>
  <div id="div2">
    <h1>Div2</h1>
  </div>
  <div id="div3">
    <h1>Div3</h1>
  </div>
  <div id="div4">
    <h1>Div4</h1>
  </div>
  <div id="div5">
    <h1>Div5</h1>
  </div>
</div>
<div class="fixed"></div>

＆＃13;

Answer 2

对您的第一个孩子使用z-index: 1。此代码应该可以实现您的目标：

body {
  padding-top: 180px;
}
div {
  background: #fff;
  padding: 50px;
  height: 80px;
  position: relative;
  top: 10;
}
#div1{
  position: fixed;
  top: 0;
  z-index: 1;
}
#div2, #div4 {
  background: black;
  color: #fff;
}

使用jQuery或CSS将位置固定为div

2 个答案: