jQuery 实现浮动的侧栏实例
在 Web 应用程序中，使用侧边栏是一种常见的设计模式。当用户在页面上滚动时，该侧栏会悬停在屏幕旁边，以便可以随时访问其内容。在这篇文章中，我们将探讨如何使用 jQuery 来实现一个这样的示例。
准备工作
在开始之前，确保已经引入了 jQuery 库文件。你可以从官方网站上下载或通过 CDN 引入：
---- -- --- -- ------ --- ------- -----------------------------------------------------------
HTML 结构
我们需要一个 HTML 元素来放置浮动的侧栏和主要内容。下面是一个示例：
---- ---------------- ---- -------------------------- ---- -------------------------- ------
其中，.wrapper 是父容器，.sidebar 和 .content 分别是侧栏和主要内容的容器。
CSS 样式
为了使侧栏能够浮动并且始终保持在视图中，我们需要添加一些 CSS 样式。下面是一个基本的样式示例：
-------- - -------- ----- - -------- - ------ ---- --------- ------ ---- -- ------- -- ----------------- ----- ----------- - - ---- ------- -- -- ----- - -------- - ------ ---- ------------ ---- -
其中，我们使用 position: fixed 将侧栏固定在屏幕上方，并使用 top 和 bottom 属性将其与屏幕顶部和底部对齐。
jQuery 实现
现在我们已经设置了基本的 HTML 结构和 CSS 样式，接下来让我们使用 jQuery 来添加一些交互功能。具体来说，我们将实现以下行为：
- 当用户滚动页面时，将侧栏悬停在视图中。
- 当用户单击侧栏时，将其展开或折叠。
---------------------------- -
-- ---------
--- -------- - --------------
--- -------- - --------------
-- --------
--------------------------- -
-- -----------
--- --- - ----------- ---------------------
--- ------ - -------------------------- --- - ------------------------
--- ---- - --------------------------------
-- ---------
--------------
--------- -----------
---- ----
------- ---------------- - -------
----- -----
------ ------------------------- - ----
---
---
-- --------
------------------------- -
-- ---------------------
-- ------------------------------- -
------------------------------------------------ ------- -----
----------------------------- ------- -----
- ---- -
--------------------------------------------- ------- -----
----------------------------- ------- -----
-
---
---在上面的代码中，我们首先获取了侧栏和内容元素，并使用 $(window).scroll() 监听窗口滚动事件。每次滚动时，我们计算出侧栏应该出现的位置，并使用 .css() 方法设置其位置和大小。
同时，我们还监听了侧栏的点击事件，并使用 .hasClass() 和 .addClass() 方法来切换
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/3420