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 相关文章推荐
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
jQuery+jRange实现滑动选取数值范围特效
Mar 14 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
详解vue-cli 脚手架 安装
Apr 16 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
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基础知识:函数基础知识
2006/12/13 PHP
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
酒店服务与管理毕业生求职信
2013/11/02 职场文书
小学母亲节活动总结
2015/02/10 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫