HTML 如何在滚动页面时使一个div不动

在本文中，我们将介绍如何使用HTML和CSS来使一个div元素在滚动页面时保持固定位置，不随滚动而移动。

阅读更多：HTML 教程

方法一：position: fixed

在CSS中，可以使用position属性来控制元素的位置。其中，position: fixed可以使一个元素相对于浏览器窗口保持固定位置，不受页面滚动的影响。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
#fixed-div {
  position: fixed;
  top: 10px;
  left: 10px;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>
</head>
<body>

<div id="fixed-div">
  这个div元素将保持固定位置，不受页面滚动的影响。
</div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor aliquam efficitur. 
Morbi consequat consequat dui, in tristique mi consequat non. Aliquam viverra, felis eget 
gravida tincidunt, justo lacus fermentum sem, a dapibus odio purus at ipsum. Nam aliquam 
convallis purus sed imperdiet. Integer maximus finibus lacus in fermentum. Suspendisse 
potenti. Maecenas dapibus sollicitudin congue. Duis placerat urna at libero auctor, nec 
ullamcorper lorem aliquet.
</p>

<!-- 大段落，产生滚动效果 -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor aliquam efficitur. 
Morbi consequat consequat dui, in tristique mi consequat non. Aliquam viverra, felis eget 
gravida tincidunt, justo lacus fermentum sem, a dapibus odio purus at ipsum. Nam aliquam 
convallis purus sed imperdiet. Integer maximus finibus lacus in fermentum. Suspendisse 
potenti. Maecenas dapibus sollicitudin congue. Duis placerat urna at libero auctor, nec 
ullamcorper lorem aliquet.
</p>

</body>
</html>

在上面的示例中，我们创建了一个id为”fixed-div”的div元素，并将其设置为position: fixed，同时通过top和left属性控制了其初始位置。在滚动页面时，无论页面如何滚动，这个div元素都会保持固定位置。

方法二：position: sticky

除了position: fixed外，CSS还提供了另一种方式来使元素保持固定位置，即position: sticky。position: sticky使元素在滚动过程中表现为相对定位，直到其父元素的滚动容器达到某个阈值。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
#sticky-div {
  position: sticky;
  top: 10px;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>
</head>
<body>

<div id="sticky-div">
  这个div元素将保持固定位置，直到其父元素的滚动容器达到某个阈值。
</div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor aliquam efficitur. 
Morbi consequat consequat dui, in tristique mi consequat non. Aliquam viverra, felis eget 
gravida tincidunt, justo lacus fermentum sem, a dapibus odio purus at ipsum. Nam aliquam 
convallis purus sed imperdiet. Integer maximus finibus lacus in fermentum. Suspendisse 
potenti. Maecenas dapibus sollicitudin congue. Duis placerat urna at libero auctor, nec 
ullamcorper lorem aliquet.
</p>

<!-- 大段落，产生滚动效果 -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor aliquam efficitur. 
Morbi consequat consequat dui, in tristique mi consequat non. Aliquam viverra, felis eget 
gravida tincidunt, justo lacus fermentum sem, a dapibus odio purus at ipsum. Nam aliquam 
convallis purus sed imperdiet. Integer maximus finibus lacus in fermentum. Suspendisse 
potenti. Maecenas dapibus sollicitudin congue. Duis placerat urna at libero auctor, nec 
ullamcorper lorem aliquet.
</p>

</body>
</html>

在上面的示例中，我们创建了一个id为”sticky-div”的div元素，并将其设置为position: sticky，同时通过top属性控制了其初始位置。在滚动页面时，这个div元素会一直保持在初始位置，直到其父元素的滚动容器达到某个阈值（例如top: 10px）后，div元素会变为相对定位，随着页面滚动而移动。