我如何在左div完成滚动之前固定左DIV

Question

I have a test web page with three sections. 我有一个包含三个部分的测试网页。 The first and third sections are both full page size (100% width and height). 第一部分和第三部分均为完整页面尺寸（宽度和高度均为100％）。 The center section however, is split into two halves with a title on the left and content on the right. 但是，中间部分分为两半，标题在左侧，内容在右侧。 What I'm trying to achieve is that when you scroll to the second section, the left hand side locks into place when it's scrolled to the top of the screen and then continues to scroll once the content on the right has been passed. 我要实现的目标是，当您滚动到第二部分时，当左侧滚动到屏幕顶部时，左侧将锁定到位，然后在右侧的内容通过后继续滚动。

I've so far attempted to achieve this with Bootstraps affix property but can't seem to get that to work no matter what I try. 到目前为止，我一直试图通过Bootstraps的affix属性来实现这一点，但是无论我如何尝试，似乎都无法使它正常工作。 This is my test markup... 这是我的测试标记...

<!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>

And the CSS I'm using... 我正在使用的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;
}

I'd actually prefer to use Bootstrap but is there a nice easy way to achieve this with just CSS and/or JQuery? 我实际上更喜欢使用Bootstrap，但是有没有一种很好的简便方法仅使用CSS和/或JQuery来实现呢？

EDIT: Found this page which does something similar to what I'm looking for. 编辑：找到此页面，该页面与我正在寻找的内容相似。 Just scroll down beyond the first page. 只需向下滚动到第一页即可。

Example website with required behaviour 具有所需行为的示例网站

Thanks in advance, Simon 预先感谢西蒙

Answer 1

you can try following this is with pure css idea is to tweak with z-indexes.if you need more smooth and clean effect you can use jquery or parallax plugins 您可以尝试使用纯css跟随此操作，想法是使用z-indexes进行调整。如果您需要更平滑和干净的效果，则可以使用jquery或视差插件

 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; }

 <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>

我如何在左div完成滚动之前固定左DIV

问题描述

1 个解决方案

解决方案1
-1 2015-12-24 12:39:59

我如何在左div完成滚动之前固定左DIV

问题描述

1 个解决方案

解决方案1 -1 2015-12-24 12:39:59

解决方案1
-1 2015-12-24 12:39:59