Question

我想创建一个列表，其中前两个项目始终位于顶部，无论滚动如何。我还希望滚动条只包含列表中的其余项目。

我创建了一个粗略的想法的小提琴，这几乎是使用固定在前两个列表项上的位置，然后在滚动条所包含的区域使用padding-top。但它不起作用。

编辑：

请务必使用清单。

HTML：

<div class="mast_head">
  <p style="font-family: 'Roboto', sans-serif;font-size:5vw;color:white;line-height:0;position: relative;
  top: 50%;">
    Text 1
  </p>
  <p style="font-family: 'Work Sans', sans-serif;font-size:2vw;color:rgba(255,255,255,.5);line-height:0;position: relative;
  top: 50%;">
    Text 2
  </p>
  <div style="top:-50;font-family: 'Biryani', sans-serif;color:white;">
    <div style="display:inline-block;">
      Bla1
    </div>
    <div style="display:inline-block;">
      Bla2
    </div>
    <div style="display:inline-block;">
      Bla3
    </div>
  </div>
</div>

CSS：

<ul class="list">
  <li class="item" id="first">HELLO</li>
  <li class="item" id="second">HELLO2</li>
  <li class="item">Random</li>
  <li class="item">Random</li>
  <li class="item">Random</li>
  <li class="item">Random</li>
  <li class="item">Random</li>
  <li class="item">Random</li>
</ul>

Answer 1

你对固定位置黑客的想法很接近。尝试使用margin-top而不是填充。 Modified fiddle.

Answer 2

将它改为margin-top适用于你的小提琴：

  margin-top: 120px;

始终将前两个列表保留在顶部

2 个答案: