javascript - 对所有页面内容使用一个滚动条

Question

我正在创建一个包含三个屏幕的单页网站，每个屏幕的左侧都有一个标题部分，右侧有一个内容部分。

  <article class="first" >
     <aside class="left_first">
       <h4 class="title">Title</h4>
     </aside>
     <section class="right_first">
       <p>Scrollable content</p>
     </section>
  </article>
  <article class="second" >
     <aside class="left_second">
       <h4 class="title">Title</h4>
     </aside>
     <section class="right_second">
       <p>Scrollable content</p>
     </section>
  </article>
  <article class="third" >
     <aside class="left_third">
       <h4 class="title">Title</h4>
     </aside>
     <section class="right_third">
       <p>Scrollable content</p>
     </section>
  </article>

我想去掉sections中所有的滚动条，让它们随着页面滚动，就像每次用户向下滚动时，左半部分固定不动，右半部分会继续滚动显示所有内容然后它会继续第二个屏幕等等。我试图找到一种方法，但我做不到。因此，如果有人知道如何实现这一目标，请告诉我。 提前谢谢你

Answer 1

在下面做了一个片段或> https://jsfiddle.net/mvhu8cd5/

解释:

CSS 。 我 floated aside和 section给他们20%和 80% (这完全是我的选择，您可以根据需要更改这些值，但它们需要加起来为 100%)

JQ

关于 scroll , 对于每个 article我得到了 offset().top值(从 div 顶部到文档顶部的距离)，height()值并找到 aside和 section每个 articles 中的 div ，所有这些都存储在变量中。

还存储了滚动距离(scrollTop())

然后，我做了一个带有 2 个条件的 if 语句。

条件 1 b > a ，也就是说滚动的距离必须大于文章的顶部偏移量

条件 2 b < a+c ，也就是说滚动的距离必须小于top offset + article的高度

如果满足这 2 个条件，那么我将添加类 fixed到 aside和类 giveMargin到 section .当这 2 个条件返回 FALSE 时，这 2 个自定义类将被删除。

当然，如果您需要更改，可以轻松调整 JQ

CSS 第 2 部分

为 2 个自定义类添加了样式。 position:fixed至 aside.fixed和 margin-left:20%至 section.giveMargin

添加了 margin-left 因为通过给出 position:fixed到 aside , 它的宽度不影响结构，所以因为 20%宽度 ' 消失了 ` 它需要用别的东西代替。添加边距可以做到这一点并保持与以前相同的结构

$(window).scroll(function() {
  
       $("article").each(function(){
             var a = $(this).offset().top ,
             b = $(window).scrollTop(),
             c = $(this).height(),
             title = $(this).children("aside"),
             text = $(this).children("section")
           if (b > a && b < a+c ) {
                 $(title).addClass("fixed")
                 $(text).addClass("giveMargin")
           }else{
                $(title).removeClass("fixed")
                $(text).removeClass("giveMargin")
           }
       })
       })     

aside,section { float:left}
aside { width:20%;}
section { width:80%;}
article { width:100%;float:left;}

aside.fixed { position:fixed;top:0}
section.giveMargin { margin-left:20%}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="first" >
     <aside class="left_first">
       <h4 class="title">Title 1</h4>
     </aside>
     <section class="right_first">
       <p>Lorem ipsum dolor sit amet, porta tincidunt maecenas lectus sit, risus justo, penatibus ultrices tempor ornare pretium quis, congue duis orci. Nibh placerat lobortis dui quis lobortis, maecenas orci congue habitasse vestibulum in, lacus ea nunc pellentesque fermentum, aenean porttitor sem aliqua mattis vestibulum. Molestie consequat, curabitur integer viverra, at ante neque integer phasellus at, tortor massa mauris. Erat quis ac quam amet felis, nibh ligula ut quis, eleifend scelerisque in at at scelerisque. Vulputate vehicula laboris, est quis, tristique ultrices.</p>
     </section>
  </article>
  <article class="second" >
     <aside class="left_second">
       <h4 class="title">Title 2</h4>
     </aside>
     <section class="right_second">
       <p>Sagittis nullam magna eget, integer at ut netus elementum sed quis, vulputate dui quisque lobortis conubia. In a duis semper leo ante mi, vitae ut vitae nec lacus, tortor quisque vel, vel nisl pellentesque magna suspendisse dictum non, eu laoreet sodales. Nunc sollicitudin, vehicula placerat. In nunc donec arcu, in purus ac facilisis congue, arcu donec arcu enim dapibus, amet consectetuer. Erat wisi erat, nisl id iaculis maecenas, lectus enim eget elementum, adipiscing ultricies orci elit laoreet. Lorem pellentesque volutpat, id risus nulla ante, duis id, viverra et neque eget nulla lacinia, ac enim nunc justo enim sociosqu. Congue orci, lacus massa nunc accumsan dui, mauris ut proin in. Quis convallis nam at magna laoreet dolor. Curabitur cras nisl sollicitudin eget mi massa, arcu dolor ac vitae ut pellentesque amet. A felis vel conubia mattis, magna tempor est nibh tortor cras id, luctus sed nisl ornare. Porta ut aenean, eget in, maecenas tristique lectus.</p>
     </section>
  </article>
  <article class="third" >
     <aside class="left_third">
       <h4 class="title">Title 3</h4>
     </aside>
     <section class="right_third">
       <p>Penatibus pede, convallis dolor, augue porta lectus libero, nam sed. Nunc suspendisse erat scelerisque vestibulum, id ultricies urna et, tortor lacus varius sagittis pellentesque. Ut sollicitudin arcu, lobortis pretium, amet eu aliquam, vivamus sodales tempor, vestibulum wisi orci mi mauris arcu et. Suscipit auctor elementum, tellus arcu diam exercitation at, orci sapien eget sollicitudin ut vivamus amet. Posuere eget dapibus tortor, tortor pede mollis pede, nihil elit vitae. Quis id maecenas neque congue ut, mi nunc amet, ligula vel diam donec quam justo vitae. Nec tellus lectus ut, pulvinar nulla massa adipiscing, odio dui eleifend tellus id tortor hendrerit. Pede ante in suscipit augue, vestibulum dui, pellentesque risus faucibus.

Lorem ipsum dolor sit amet, porta tincidunt maecenas lectus sit, risus justo, penatibus ultrices tempor ornare pretium quis, congue duis orci. Nibh placerat lobortis dui quis lobortis, maecenas orci congue habitasse vestibulum in, lacus ea nunc pellentesque fermentum, aenean porttitor sem aliqua mattis vestibulum. Molestie consequat, curabitur integer viverra, at ante neque integer phasellus at, tortor massa mauris. Erat quis ac quam amet felis, nibh ligula ut quis, eleifend scelerisque in at at scelerisque. Vulputate vehicula laboris, est quis, tristique ultrices.</p>
     </section>
  </article>