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 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 Javascript
解析javascript瀑布流原理实现图片滚动加载
Mar 10 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 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中header的用法详解
2013/06/07 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
PHP使用函数用法详解
2018/09/30 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
js的回调函数详解
2015/01/05 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
vuex实现简易计数器
2016/10/27 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
微信小程序模板template简单用法示例
2018/12/04 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
Python内置函数OCT详解
2016/11/09 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
思想品德自我鉴定
2013/10/12 职场文书
项目经理的岗位职责
2013/11/23 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS