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中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
详解vue的双向绑定原理及实现
May 05 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
javascript实现简单留言板案例
Feb 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获取远程图片并把它保存到本地的代码
2008/04/07 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
Vuex简单入门
2017/04/19 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
javascript操作元素的常见方法小结
2019/11/13 Javascript
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
Python实现定时任务
2017/02/08 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
广告学专业应届生求职信
2013/10/01 职场文书
七年级生物教学反思
2014/01/30 职场文书
教师学习培训邀请函
2014/02/04 职场文书
Pytest中skip skipif跳过用例详解
2021/06/30 Python
Python Django模型详解
2021/10/05 Python
python微信智能AI机器人实现多种支付方式
2022/04/12 Python
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技