Question

我不确定措辞是否正确。我用谷歌搜索了我的不同术语。用简单的英语我想要一个：

滚动但不会消失的

框。

我试图获得类似于Linkedin的侧盒的盒子。它们随页面滚动但停止滚动并且永不消失。

混合使用：position:fixed和position:absolute？

我在盒子上方有其他盒子是问题，位于与侧盒完全相同的区域。

Answer 1

使用原始CSS是不可能的，但如果使用JavaScript，是可能的。您需要做的就是计算用户所在页面的距离，并在每次滚动一定数量的像素时添加内容。

这可以通过jQuery轻松实现。您可以绑定到$(window).scroll()函数，并使用$(window).scrollTop()检查高度。然后只需使用.append()附加一些新内容。

在以下示例中，$(window).scrollTop() + $(window).height() > $(document).height() - 100检查用户距离内容末尾100个像素的距离。然后附加新内容，滚动条的长度增加。

因为它会检查文档的高度，所以每次到达新内容的结尾时，循环都会再次触发，甚至会有更多内容获得创建。因此，以下提供了一个真正无限的卷轴：

/* Initial content */
for (var i = 0; i < 100; i++) {
  $("#scroll").append($("<div class='original-content'>Original content</div>"));
}

/* Bonus content */
$(window).scroll(function(event) {
  var scroll = $(window).scrollTop();
  if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
    for (var i = 0; i < 100; i++) {
      $("#scroll").append($("<div class='new-content'>New content</div>"));
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scroll"></div>

希望这有帮助！：）

CSS，滚动但不会消失的框

1 个答案: