在前端开发中，有时需要实现一个“sticky”效果，即当用户滚动页面时，某个元素会停留在屏幕顶部并保持可见。本文将介绍如何使用 CSS 和 JavaScript 实现这种效果。
一、使用 CSS 的 position 属性和 top 值
CSS 的 position 属性可以控制元素的定位方式，常用的取值为 static（默认值）、relative、absolute 和 fixed。
要实现“sticky”效果，可以使用 position: fixed 来将元素固定在屏幕上方，但此时元素会脱离正常文档流，并可能遮挡其他内容。因此，还需通过设置 top 属性来确保元素停留在父元素的顶部。
具体代码如下：
-- -------------------- ---- ------- ------- ------- - ------- ------- --------- --------- - ------ - --------- ------ ---- -- ------ ----- ----------------- ----- - -------- ---- --------------- ---- ------------------------------- ---- ---- --- ------
上述代码中，.parent 元素的 position 属性为 relative，.child 元素的 position 属性为 fixed，top 属性为 0，表示将 .child 元素固定在 .parent 元素的顶部。
需要注意的是，为了避免 .child 元素覆盖其他内容，可以设置其 background-color 属性为一个非透明颜色值，也可以使用 JavaScript 动态计算元素高度并调整样式。
二、使用 JavaScript 监听滚动事件
虽然上述代码可以实现“sticky”效果，但当页面中存在多个“sticky”元素时，需要逐一设置它们的样式，并可能引起层叠问题。此时，可以使用 JavaScript 来监听滚动事件，动态计算并设置元素样式。
具体代码如下：
-- -------------------- ---- -------
-------
------- -
--------- ---------
-
------------- -
--------- ------
---- --
-
--------
---- --------------------------------
---- ---- ---
--------
----- ------ - ----------------------------------
----- --------- - ----------------- -- -------------
--------------------------------- -- -- -
-- ------------------- -- ---------- -
------------------------------
- ---- -
---------------------------------
-
---
---------上述代码中，.sticky 元素的 position 属性为 relative，表示其相对于文档流进行定位。JavaScript 部分监听窗口的滚动事件，获取元素距离文档顶部的距离，并根据滚动距离动态设置 .fixed 类名，从而实现“sticky”效果。
需要注意的是，由于此方法涉及到 DOM 操作和事件监听，性能可能受到一定影响。因此，在实际使用时建议根据具体情况选择合适的方式。
三、总结
本文介绍了使用 CSS 和 JavaScript 实现“sticky”效果的两种方式，并提供了相应的示例代码和注意事项。无论使用哪种方式，都需要确保元素不会遮挡其他内容，并在性能上进行优化，以便提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29726