jQuery 实现侧边浮动导航菜单效果


Posted in Javascript onDecember 26, 2014

单页面网页内容较多,页面长度较大,需要方便快速的在页面的不同位置进行定位,所以浮动菜单逐渐流行了起来,如下图 男装、女装、美妆等。

jQuery 实现侧边浮动导航菜单效果

这种菜单功能分为两部分:

1、点击菜单项,网页滚动到对应位置,可简单通过锚点实现;

2、滚动页面的时候,菜单项的选中状态要跟着改变,这就需要监听网页的滚动事件并通过一点计算来实现了;

jQuery 实现侧边浮动导航菜单效果

计算 scrollTop 和 各个 div 的 offsetTop 的大小关系,判断现在网页显示的位置在什么地方,再根据计算的结果给对应的菜单项添加样式。比如第二个 div 的 offset().top = 300, 第三个 div 的offset().top = 600,此时的 scrollTop = 400,说明现在显示的大部分是第二个 div 的位置,700 则是第三个 div。下面是一个简单的例子:

<div id="menu">

    <ul>

        <li><a href="#item1" class="current">1F 男装</a></li>

        <li><a href="#item2">2F 女装</a></li>

        <li><a href="#item3">3F 美妆</a></li>

        <li><a href="#item4">4F 数码</a></li>

        <li><a href="#item5">5F 母婴</a></li>

    </ul>

</div>

<div id="content">

    <h1>网购</h1>
    <div id="item1" class="item">

        <h2>1F 男装</h2>

        <ul>

            <li><a href="#"><img src="" alt=""/></a></li>

            <!-- 若干个li -->

        </ul>

    </div>

    <!-- 若干个item-->

</div>
* {margin: 0;padding: 0;}

        body {font-size: 12px;line-height: 1.7;}

        li {list-style: none;}

        #content {width: 800px;margin: 0 auto;padding: 20px;}

        #content h1 {color: #0088bb;}

        #content .item {padding: 20px;margin-bottom: 20px;border: 1px dotted #0088bb;}

        #content .item h2 {font-size: 16px;font-weight: bold;border-bottom: 2px solid #0088bb;margin-bottom: 10px;}

        #content .item li {display: inline;margin-right: 10px;}

        #content .item li a img {width: 230px;height: 230px;border: none;}

        #menu{position:fixed;left:50%;margin-left:400px;top:100px;}

        #menu ul li a {

            display: block;

            margin: 5px 0;

            font-size: 14px;

            font-weight: bold;

            color: #333;

            width: 80px;

            height: 50px;

            line-height: 50px;

            text-decoration: none;

            text-align: center;

        }

        #menu ul li a:hover,#menu ul li a.current {color: #fff;background: #0088bb;} 
$(function(){

           $(window).scroll(function(){

               var scrollTop = $(document).scrollTop();

               var contentItems = $("#content").find(".item");

               var currentItem = "";

               contentItems.each(function(){

                   var contentItem = $(this);

                   var offsetTop = contentItem.offset().top;

                   if(scrollTop > offsetTop-200){//此处的200视具体情况自行设定,因为如果不减去一个数值,在刚好滚动到一个div的边缘时,菜单的选中状态会出错,比如,页面刚好滚动到第一个div的底部的时候,页面已经显示出第二个div,而菜单中还是第一个选项处于选中状态

                       currentItem = "#" + contentItem.attr("id");

                   }                   

               });

               if(currentItem&¤tItem!=$("#menu").find(".current").attr("href")){

                   $("#menu").find(".current").removeClass("current");

                   $("#menu").find("[href=" + currentItem + "]").addClass("current");

               }

           });

       });
Javascript 相关文章推荐
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
js实现随机数字字母验证码
Jun 19 Javascript
js实现文字列表无缝滚动效果
Jun 23 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
JS实现随机抽取三人
Nov 06 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
Nov 09 Javascript
Javascript的闭包详解
Dec 26 #Javascript
jQuery中focus事件用法实例
Dec 26 #Javascript
生成二维码方法汇总
Dec 26 #Javascript
Javascript中的五种数据类型详解
Dec 26 #Javascript
javascript工厂方式定义对象
Dec 26 #Javascript
jQuery中click事件用法实例
Dec 26 #Javascript
javascript实现类似超链接的效果
Dec 26 #Javascript
You might like
php email邮箱正则
2008/10/08 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
帝国cms常用标签汇总
2015/07/06 PHP
PHP7常量数组用法分析
2016/09/26 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
学习ExtJS TextField常用方法
2009/10/07 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
Python测试人员需要掌握的知识
2018/02/08 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
英国手机零售商:Metrofone
2019/03/18 全球购物
11月升旗仪式讲话稿
2014/02/15 职场文书
社团活动总结范文
2014/04/26 职场文书
班级年度安全计划书
2014/05/01 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python