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 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
JavaScript中的高级函数
Jan 04 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
js实现简单音乐播放器
Jun 30 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
oracle资料库函式库
2006/10/09 PHP
PHP 实例化类的一点摘记
2008/03/23 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
详解vue组件基础
2018/05/04 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
2019/05/21 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
python 控制语句
2011/11/03 Python
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
Python常用的json标准库
2019/02/19 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
Python模块相关知识点小结
2020/03/09 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
综合实践活动方案
2014/02/14 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
农民工工资承诺书范文
2014/03/31 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书