jQuery 浮动导航菜单适合购物商品类型的网站


Posted in Javascript onSeptember 09, 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学习网址备忘
May 29 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
Javascript中arguments用法实例分析
Jun 13 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
Node.js实现文件上传
Jul 05 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
js实现搜索栏效果
Nov 16 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 Javascript
Vue左滑组件slider使用详解
Aug 21 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 #Javascript
三种取消选中单选框radio的方法
Sep 09 #Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 #Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 #Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 #Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 #Javascript
点击button获取text内容并改变样式的js实现
Sep 09 #Javascript
You might like
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
php解析xml方法实例详解
2015/05/12 PHP
PHP实现的简单适配器模式示例
2017/06/22 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
python 两个数据库postgresql对比
2019/10/21 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
浅析python中while循环和for循环
2019/11/19 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
职业生涯规划设计步骤
2014/01/12 职场文书
技能比赛获奖感言
2014/02/14 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
节水口号标语
2014/06/19 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
学术会议通知范文
2015/04/15 职场文书
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python