Html 在右侧DIV完成滚动之前，如何修复左侧DIV_Html_Css_Twitter Bootstrap

Html 在右侧DIV完成滚动之前，如何修复左侧DIV

html css twitter-bootstrap

Html 在右侧DIV完成滚动之前，如何修复左侧DIV,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我有一个包含三个部分的测试网页。第一和第三部分都是整页大小（100%宽度和高度）。但是，中间部分分为两部分，标题在左侧，内容在右侧。我试图实现的是，当您滚动到第二部分时，当它滚动到屏幕顶部时，左侧锁定到位，然后在传递右侧内容后继续滚动到目前为止，我一直试图用Bootstraps属性来实现这一点，但无论我怎么做，似乎都无法实现。这是我的测试标记 <!DOCTYPE html> <html lang="en"> <head> <title>T

我有一个包含三个部分的测试网页。第一和第三部分都是整页大小（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>

实际上我更喜欢使用Bootstrap，但是有没有一种简单的方法可以通过CSS和/或JQuery实现呢

编辑：找到了这个页面，它做了一些类似于我正在寻找的东西。只需向下滚动到第一页之外

提前感谢,，

Simon

您可以尝试使用纯css来调整z索引。如果您需要更平滑和干净的效果，可以使用jquery或视差插件

html，
身体{
身高：100%；
保证金：0；
填充：0；
}
h1，
h2，
h3，
p{
保证金：0；
填充：0；
}
h1{
填充：50px 0 50px 50px；
}
p{
填充：20px；
}
.整页{
最小高度：100vh；
宽度：100%；
位置：相对位置；
显示：块；
}
.章节标题{
位置：绝对位置；
宽度：50%；
左：0px；
背景色：#f00；
高度：100vh；
}
.部分详情{
位置：相对位置；
宽度：50%；
左：50%；
高度：100vh；
}
.魔术{
宽度：100%；
位置：绝对位置；
排名：0；
左：0；
z指数：999；
溢出-x：滚动；
溢出y：无；
}


这应该保持不变
直到格林倒下
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试
你好，世界，这是一个测试

你会在现实生活中值得尊敬的网站上使用自己的建议吗？

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