如何用jQuery制作电梯导航功能？

本文共计729个文字，预计阅读时间需要3分钟。

原文示例为：本文字例为大家庭分享了jQuery实现电梯导航模块的整体代码，供大家参考，具体内容如下：+ 功能模块 1、当页面滚动到电梯模块时，+ 显示电梯导航 2、点击电梯导航中的li，+ 页面滚动到对应的模块

改写后：以下为jQuery实现电梯导航模块的代码示例，包含功能模块和操作说明：- 功能模块：页面滚动至电梯模块时自动显示导航；- 操作说明：点击导航中的项目，页面将滚动至对应模块。

本文实例为大家分享了jQuery实现电梯导航模块的具体代码，供大家参考，具体内容如下

功能模块

1、当页面滚动到电器的模块， 显示电梯导航
2、点击电梯导航中的 li， 页面滚动到对应的内容区域
3、为当前点击的 li 添加 current 类
4、页面内容滚动到第几个区域， 左侧的电梯导航自动高亮对应的 li
5、为页面滚动设置节流阀(点击 li 时， 不进行第4步判断)

html部分结构

<ul class="sidebar"> <li>手机模块</li> <li>电器模块</li> <li>产品模块</li> <li>服装模块</li> <li>鞋子模块</li> </ul> <section class="main"> <div>手机模块</div> <div class="model">电器模块</div> <div>产品模块</div> <div>服装模块</div> <div>鞋子模块</div> </section>

css部分

* { margin: 0; padding: 0; margin: 0 auto; } div { width: 600px; height: 600px; border: 1px solid red; } li { list-style: none; border: 1px solid #abcdef; cursor: pointer; } .sidebar { display: none; position: fixed; left: 0; top: 350px; width: 66px; height: 200px; } .current { background-color: red; }

jQuery部分

//节流阀开启 var flag = true //页面滚动事件 $(window).scroll(function() { // 当页面滚动到电器模块侧边栏显示 $(this).scrollTop() >= $('.model').offset().top ? $('.sidebar').show() : $('.sidebar').hide() // 遍历div $('.main div').each(function(i, item) { if (flag == false) { return } var Top = $(item).offset().top // 滚动的距离大于等于当前盒子离顶部的距离 if ($(window).scrollTop() >= Top) { //显示高亮 $('.sidebar li').eq(i).addClass('current').siblings().removeClass('current') } }) }) //点击让li,出现在对应的位置 //绑定点击事件,获取索引,获取楼层与顶部的距离,给html添加动画 $('.sidebar li').click(function() { // 节流阀关闭了 flag = false // 改变背景颜色 // 获取当前的索引值 var index = $(this).index() // 获取当前索引位置上的盒子离顶部的距离 var top = $('div').eq(index).offset().top // 给html添加动画 $('html,body').animate({ scrollTop: top }, function() { flag = true }) //点击显示高亮 $(this).addClass('current').siblings().removeClass('current') })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。