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

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表示该元素将固定在页面布局上。