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

仅将列表中选定的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元素，则在滚动时将其固定在顶部。

最佳答案

如果要在滚动时保持所选元素可见，则可以通过在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");
});