JS实现顶部可折叠的菜单工具栏效果实例
在前端开发中,经常会遇到需要实现可折叠的菜单工具栏效果的情况。本文将介绍使用JavaScript实现一个简单的顶部可折叠的菜单工具栏效果,同时讲解该效果的实现原理,以及如何进一步扩展和优化代码。
效果预览
首先,我们来看一下最终实现的效果:
可以看到,在页面滚动时,顶部的菜单工具栏会自动收缩,以便给用户更多的可视空间。当用户向上滚动页面时,工具栏会重新展开。同时,当用户点击工具栏中的某个菜单项时,页面也会平滑地滚动到对应的位置。
实现原理
要实现这个效果,我们需要用到一些JavaScript和CSS技巧。具体来说,我们会用到以下几个步骤:
步骤一:监听滚动事件
首先,我们需要监听页面的滚动事件。当用户向上或向下滚动页面时,我们需要相应地做出反应。
--------------------------------- ---------- - -- ------ ---
步骤二:判断滚动方向
接下来,我们需要判断用户是向上还是向下滚动了页面。这可以通过比较当前的滚动位置和上一个滚动位置得出。
--- ------------------ - -- --------------------------------- ---------- - --- --------------------- - ------------------ -- ----------------------------------- -- ---------------------- - ------------------- - -- ---- - ---- - -- ---- - ------------------ - ---------------------- ---
步骤三:展开/收缩工具栏
有了滚动方向后,我们就可以相应地展开或收缩页面顶部的工具栏。在本例中,我们会给工具栏添加一个 collapsed
类名来表示它是否已经收缩。
--- ------- - ----------------------------------- --------------------------------- ---------- - --- --------------------- - ------------------ -- ----------------------------------- -- ---------------------- - ------------------- - ----------------------------------- - ---- - -------------------------------------- - ------------------ - ---------------------- ---
同时,我们还需要在CSS中定义 collapsed
类名的样式:
------------------ - ---------- ------------------ -
该样式会将工具栏向上平移 100%,从而实现收缩效果。
步骤四:平滑滚动到锚点
最后,我们还需要处理用户点击工具栏中的菜单项时如何平滑地滚动到对应的位置。这可以通过以下代码实现:
--- ----- - ----------------------------------- ---- --- ---- - - -- - - ------------- ---- - ---------------------------------- --------------- - ----------------------- --- -------- - -------------------------- --- ------------- - --------------------------------- ----------------- ---- ------------------------ --------- -------- --- --- -
该代码会监听所有 .toolbar a
元素的点击事件,并找到它对应的目标元素。然后,使用 window.scrollTo()
方法实现平滑滚动效果。需要注意的是,在调用 window.scrollTo()
方法时,需要将 behavior
参数设置为 'smooth'
来启用平滑滚动。
完整代码
最终的代码如下所示
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/2936