当网页内容过长时，为了提高用户体验，我们通常会使用滚动条来让用户方便地浏览页面。然而，页面顶部的导航栏等界面元素也随之滚出视野范围，可能会影响用户操作与浏览体验。因此，粘性头（sticky header）应运而生。
粘性头是指当用户向下滚动页面时，页面的某一区域会“粘”在屏幕顶端，不再跟随滚动而消失。它可以让用户方便地随时回到页面其他位置或访问导航等功能，并且不占据太多屏幕空间。
本文将介绍如何通过 jQuery 实现滚动时收缩的粘性头效果，同时提供详细的代码及演示。
粘性头的基本实现
首先，我们需要一个基本的 HTML 结构和 CSS 样式，其中包括导航栏和要粘住的元素。这里我们使用 Bootstrap 的样式来简化布局。
---- ------------- ---------------- ------------ -------- -----------
-- -------------------- --------------- ----------
------- ---------------------- ------------- ---------------------- -------------------------------- --------------------------------- --------------------- ------------------ ------------
----- -----------------------------------
---------
---- --------------- ---------------- -----------------------
--- -------------------
--- --------------- --------
-- ---------------- -----------------
-----
--- -----------------
-- ---------------- ------------------
-----
--- -----------------
-- ---------------- --------------------
-----
-----
------
------
---- ----------------
---------- ------ ---------
-------- ----- ----- --- ----- ----------- ---------- ----- ------ ------- ---- ----- --- ------- ------- ----- --------- ---- --- ------ -------- ---------- ----- -- ---- -- --- ------- ------- ----- -- ------ ---- ------ --------- ------- --- ------ --- --------- -- ---------- ---- ----- ------ -- -------- ---- ------ -- -------- ------- ------- ------ ------------ -------- ----- --------- -------- -- ----- -- --------- ----- -- ------ -------- ------ --- ----- ---- ----- -------- -------- -- --- ---- --- --- ---- --- ----- ------- ------------- ------- ------ ------ -- ------ -------- ------- --------- ---- ------------ -- --------- ------- ----- --- ---- ----- ---- --------- --- ----------- ------------
---- ---- ------- ---- ---
---------- - ------------ ----- - -------- - -------- ----- -
接下来，我们使用 jQuery 监听页面滚动事件，并在滚动时判断是否需要固定导航栏。
--- ------ - -------------
--------------------------- -
-- -------------------- - --- - -- ------------------
----------------------------- -- -- --------- --
- ---- -
-------------------------------- -- -- --------- --
-
---这里的 fixed-top 样式是 Bootstrap 的类之一，可以让元素固定在屏幕顶端。当滚动距离超过 40px 时，我们就给导航栏添加该样式，使其固定在屏幕顶端；否则，我们就移除该样式。
到此为止，我们
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/12099