如何使侧栏在滚动时粘住而不消失

Question

好的，如上图所示，有一个侧边栏，其中包含社交网站的图像。滚动它不会消失...... link to the image website

所以我想知道它是如何发生的，如果我想让那个侧边栏粘在左下角，我该怎么做...

Answer 1

给侧边栏元素一个position: fixed。这将允许您控制其相对于浏览器窗口的位置。要将其放置在左下角，只需提供left: 0; bottom: 0。

这是一个例子：

#sidebar {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  position: fixed;
  bottom: 0;
  left: 0;
}

#content {
  height: 1000px;
  width: 100%;
}

<div id="sidebar">
This is the sidebar
</div>

<div id="content">
This is just a really long div to allow you to scroll and see the effect
</div>

Answer 2

给你的侧边栏的父元素position: fixed，然后你可以使用left、right、top和bottom属性来定位你的侧边栏。

Position: fixed 表示元素将固定在浏览器窗口上。

Position: absolute 表示元素将固定在页面布局上。