css 上下滚动 固定 |css3 颜色过渡 动画

/* 设置固定位置 */
.fixed {
position: fixed;
top: 0;
left: 0;
}

在上述代码中，给要固定的元素设置了position:fixed属性，并将top和left都设置为0，这样该元素就始终固定在页面的左上角了。

如果要让元素固定在页面的底部，可以将bottom属性设置为0，如下：

/* 设置底部固定 */
.fixed-bottom {
position: fixed;
bottom: 0;
left: 0;
}

当页面滚动时，固定定位的元素不会随着页面滚动而移动位置，而是保持不变，直到整个页面滚动到底部或固定元素被其他元素遮盖住。

除了top、bottom、left、right属性外，还可以配合使用z-index属性来控制固定元素的层级，确保其不会被其他元素遮挡。

/* 设置z-index，确保固定元素在上层 */
.fixed {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}

以上就是CSS上下滚动固定的实现方法，可以根据实际需求进行设置。在实际开发中，可以将该效果应用到导航栏、返回顶部按钮等元素中，提升用户体验。