Question

我有一个包含三个部分的测试网页。第一和第三部分都是整页尺寸（100％宽度和高度）。然而，中间部分分成两半，左边是标题，右边是内容。我想要实现的是当你滚动到第二部分时，当它滚动到屏幕顶部时左手边会锁定到位，然后在右边的内容通过后继续滚动。

到目前为止，我已尝试使用Bootstraps附加属性实现此功能，但无论我尝试什么，似乎都无法实现。这是我的测试标记......

<!DOCTYPE html>
<html lang="en">
<head>
    <title>TEST</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>

    <!-- Section 1 -->
    <section class="fullpage" style="background-color:#0ff;">
    </section>

    <!-- Section 2 -->
    <section class="fullpage">

        <div class="sectiontitle">
            <h1>THIS SHOULD STAY IN PLACE</h1>
            <h1>UNTIL GREEN GETS TO BOTTOM</h1>
        </div>

        <div class="sectiondetail">
            <p>Hello world this is a test</p><p>Hello world this is a test</p><p>Hello world this is a test</p>
        </div>

    </section>

    <!-- Section 3 -->
    <section class="fullpage" style="background-color:#ff0;">
    </section>

</body>
</html>

我正在使用的CSS ......

html, body{
  height:100%;
  margin:0;
  padding:0;
}
h1, h2, h3, p{
  margin:0;
  padding:0;
}
h1{
  padding:50px 0 50px 50px;
}
p{
  padding:20px;
}

.fullpage{
  min-height:100vh;
  width:100%;
  position:relative;
  display:block;
}

.sectiontitle{
  position:absolute;
  width:50%;
  left:0px;
  background-color:#f00;
  height:100vh;
}

.sectiondetail{
  position:relative;
  width:50%;
  left:50%;
  background-color:#0f0;
  height:200vh;
}

我实际上更喜欢使用Bootstrap但是有一个很简单的方法来实现这个只有CSS和/或JQuery吗？

编辑：发现此页面的内容类似于我正在寻找的内容。只需向下滚动到第一页之外。

Example website with required behaviour

提前致谢，西蒙

Answer 1

你可以尝试下面这是纯粹的css想法是用z-indexes调整。如果你需要更流畅和干净的效果你可以使用jquery或parallax插件

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
p {
  margin: 0;
  padding: 0;
}
h1 {
  padding: 50px 0 50px 50px;
}
p {
  padding: 20px;
}
.fullpage {
  min-height: 100vh;
  width: 100%;
  position: relative;
  display: block;
}
.sectiontitle {
  position: absolute;
  width: 50%;
  left: 0px;
  background-color: #f00;
  height: 100vh;
}
.sectiondetail {
  position: relative;
  width: 50%;
  left: 50%;
  height: 100vh;
}
.magic {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  overflow-x: scroll;
  overflow-y: none;
}

＆＃13;

<section class="fullpage" style="background-color:#0ff;">
</section>

<!-- Section 2 -->
<section class="fullpage" style="position:relative;background:green;">

  <div class="sectiontitle">
    <h1>THIS SHOULD STAY IN PLACE</h1>
    <h1>UNTIL GREEN GETS TO BOTTOM</h1>
  </div>
  <div class="magic">
    <div class="sectiondetail">
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
      <p>Hello world this is a test</p>
    </div>

  </div>

</section>

<!-- Section 3 -->
<section class="fullpage" style="background-color:#ff0;">
</section>

＆＃13;

如何在右手div完成滚动的同时修复左手DIV

1 个答案: