Question

仅保留列表中固定的li个元素固定在顶部。

jQuery(".list-outer ul li").click(function() {
  jQuery(this).toggleClass("li-active");
});

.li-active {
  background: red;
}

<div class="list-outer">
  <ul>
    <li>
      Content blk1
    </li>
    <li>
      Content blk2
    </li>
    <li>
      Content blk3
    </li>
    <li>
      Content blk4
    </li>
  </ul>
</div>

示例：如果选择第二和第四li个元素，则在滚动时将其固定在顶部。

Answer 1

如果要在滚动时保持选定的元素可见，可以通过向list添加属性来使用CSS进行归档：

.li-active {
    background: red;
    position:fixed;
}

为使外观更好看，我建议您创建2个列表，普通列表和另一个带有选定元素的列表。

<ul class="list-outer">
    <li>
      Content blk1
    </li>
    <li>
      Content blk2
    </li>
    <li>
      Content blk3
    </li>
    <li>
      Content blk4
    </li>
  </ul>
  <ul class="selected-list"></ul>

当您选择一个时，只需移至所选列表：

$(".list-outer ul li").click(function() {
  $(this).detach().appendTo(".selected-list");
});

通过这种方式，您将只在页面中固定所选列表：

.selected-list{
    position:fixed;
}

更新：
要将其返回到先前的列表：

$(".selected-list li").on('click',function() {
  $(this).detach().appendTo(".list-outer");
});

滚动时只需将选定的块固定在顶部

1 个答案: