使用 CSS 实现元素随滚动条向下移动效果

本文将介绍如何利用 css 实现元素在页面滚动时向下移动的效果，而无需编写任何 JavaScript 代码。 这种效果通常用于创建导航栏、侧边栏等在页面滚动时始终保持可见的元素。 我们可以通过 CSS 的 position 属性来实现这一效果，主要有两种方法：使用 position: fixed 或 position: sticky。

方法一：使用 position: fixed

position: fixed 属性可以将元素固定在浏览器窗口的特定位置。 即使页面滚动，该元素的位置也不会改变。

.element {   position: fixed;   top: 10px; /* 元素距离浏览器窗口顶部的距离 */   left: 0;   /* 元素距离浏览器窗口左侧的距离 */   width: 100%; /* 元素宽度 */   background-color: #f0f0f0; /* 背景颜色 */   padding: 10px; /* 内边距 */ }

这段代码会将 .element 类的元素固定在浏览器窗口顶部 10 像素的位置，并占据整个窗口宽度。 当页面滚动时，该元素将始终保持在屏幕上。

注意事项：

• position: fixed 的元素会脱离文档流，这意味着它不会占据页面空间，可能会覆盖其他元素。
• 需要设置 top、right、bottom 或 left 属性来指定元素的位置。
• 请确保元素的宽度和高度设置合理，以避免影响页面布局。

方法二：使用 position: sticky

position: sticky 属性可以将元素定位为粘性定位。 当元素滚动到特定位置时，它会像 position: fixed 一样固定在屏幕上，直到滚动超出特定范围。

.parent {   height: 1200px; /* 父元素高度，用于触发滚动 */   width: auto;   position: relative; /* 父元素需要设置 position: relative */ }  .floating {   position: sticky;   top: 10px; /* 元素距离父元素顶部的距离 */   width: 100%;   height: 60px;   background: black;   color: white; }

<div class="parent">   <p>Hi this is parent</p>   <div class="floating">     This is floating element   </div> </div>

在这个例子中，.floating 类的元素将在滚动到距离父元素顶部 10 像素的位置时固定在屏幕上。当滚动超出父元素范围后，该元素将恢复到原来的位置。

注意事项：

• position: sticky 元素需要在其父元素上设置 position: relative 或 position: absolute。
• 需要设置 top、right、bottom 或 left 属性来指定元素开始固定的位置。
• position: sticky 在某些旧版本的浏览器中可能不支持。

总结

本文介绍了两种使用 CSS 实现元素随滚动条向下移动效果的方法：position: fixed 和 position: sticky。 position: fixed 适用于需要始终固定在屏幕上的元素，而 position: sticky 适用于需要在特定滚动范围内固定的元素。 选择哪种方法取决于具体的应用场景和需求。 使用这些方法可以方便地创建各种交互式页面元素，而无需编写复杂的 JavaScript 代码。