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>

我想删除部分中的所有滚动条，并使它们随页面滚动，就像每次用户向下滚动一样，左半部分是固定的，右边将继续滚动显示所有内容然后它将会继续到第二个屏幕，依此类推。我试图找到一种方法，但我无法做到。所以，如果有人知道如何实现这一点，请告诉我。提前谢谢

Answer 1

在下面制作了一个片段或＆gt; https://jsfiddle.net/mvhu8cd5/

说明：

CSS 。我floated aside和section给他们20%和80%（这纯粹是我的选择，您可以根据需要更改这些值）但他们需要加起来100%）

<强> JQ

在scroll上，对于每个article我获得offset().top值（从div顶部到文档顶部的距离），height()值并找到每个aside中的section和articles div，以及存储在变量中的所有div。

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

然后，我发了一个有两个条件的if语句。

条件1 b > a，这意味着滚动的距离必须大于文章的顶部偏移量

条件2 b < a+c，这意味着滚动的距离必须小于文章的顶部偏移+高度

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

当然，如果你想要改变，可以很容易地调整JQ

CSS part2

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

通过向position:fixed提供aside来添加保证金，因为它的宽度不会影响结构，因为20%宽度＆＃39;消失了`它需要被其他东西取代。添加边距就可以了，并保持与之前相同的结构

希望我的解释清楚:)让我知道它是否有帮助：D

＆＃13;

$(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")
           }
       })
       })

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: