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 相关文章推荐
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
jquery 3D球状导航的文章分类
Jul 06 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
vue-for循环嵌套操作示例
Jan 28 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后台程序与Javascript的两种交互方式
2009/10/25 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
Python time库基本使用方法分析
2019/12/13 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
python 贪心算法的实现
2020/09/18 Python
四个太阳教学反思
2014/02/01 职场文书
交通违章检讨书
2014/09/21 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
租房协议书范例
2014/10/14 职场文书
同意迁入证明模板
2014/10/26 职场文书
赞助商致辞
2015/07/30 职场文书
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android