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 相关文章推荐
JavaScript 打地鼠游戏代码说明
Oct 12 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
JS实现将对象转化为数组的方法分析
Jan 21 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 Javascript
VSCode launch.json配置详细教程
Jun 18 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
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
js 动态文字滚动的例子
2011/01/17 Javascript
javascript的函数作用域
2014/11/12 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
Python多进程编程技术实例分析
2014/09/16 Python
Python实现批量压缩图片
2018/01/25 Python
django连接mysql配置方法总结(推荐)
2018/08/18 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
Python几种常见算法汇总
2020/06/02 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
商场中秋节广播稿
2014/01/17 职场文书
高中生物教学反思
2014/02/05 职场文书
支部书记四风对照材料
2014/08/28 职场文书
辩论赛新闻稿
2015/07/17 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
oracle索引总结
2021/09/25 Oracle