当网页内容很长时，为了方便用户阅读，我们通常会将页面分成若干个模块，并在页眉处添加导航链接，以便用户快速定位到所需信息。但是，当用户向下滚动页面时，页眉也会一同被滚动，导致用户需要不断滚动回到顶部才能继续操作，这会降低用户体验。
解决方法是让页眉保持静态，在滚动时始终保持在顶部位置。以下是几种实现方式：
1. 使用 CSS 的 position 属性
通过设置 CSS 的 position 属性为 fixed，可以将元素固定在页面上的某个位置，不受滚动影响。具体实现步骤如下：
HTML 代码
--------
-----
----
------ --------------------
------ --------------------
------ --------------------
------ --------------------
-----
------
---------
------
---- ---- ---
-------CSS 代码
------ - --------- ------ ---- -- ----- -- ------ ----- ----------------- ----- ----------- - - --- ------- -- -- ----- - --- - -------- ----- ---------------- ------- - -- - -------- ----- ----------- ----- ------- -- -------- -- - -- - ------- - ----- - - - ------ ----- ---------------- ----- -
2. 使用 JavaScript 动态添加样式
有些情况下，我们可能需要在滚动到一定位置后再将页眉固定在顶部，此时可以使用 JavaScript 实现动态添加样式。具体实现步骤如下：
HTML 代码
------- ------------
-----
----
------ --------------------
------ --------------------
------ --------------------
------ --------------------
-----
------
---------
------
---- ---- ---
-------JavaScript 代码
--------------------------------- ---------- -
--- ------ - ----------------------------------
-- ------------------- - ---- - -- --- ----- ------
------------------------------
- ---- -
---------------------------------
-
---CSS 代码
------- - ----------------- ----- ----------- - - --- ------- -- -- ----- - ------ - --------- ------ ---- -- ----- -- ------ ----- -
总结
通过使用 CSS 的 position 属性或 JavaScript 动态添加样式，我们可以实现页眉保持静态，在滚动时始终保持在顶部位置的效果。这种做法不仅可以提升用户体验，还可以增加页面的美观度和易用性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/14031