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 相关文章推荐
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
layui多图上传实现删除功能的例子
Sep 23 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中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
深入理解PHP中的count函数
2016/05/31 PHP
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
JavaScript 中的 this 工作原理
2018/06/20 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
python使用nntp读取新闻组内容的方法
2015/05/08 Python
django加载本地html的方法
2018/05/27 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
详解Django admin高级用法
2019/11/06 Python
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
yy结婚证婚词
2014/01/10 职场文书
文明青少年标兵事迹材料
2014/01/28 职场文书
全神贯注教学反思
2014/02/03 职场文书
主题婚礼策划方案
2014/02/10 职场文书
《两只鸟蛋》教学反思
2014/02/10 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
土建施工员岗位职责
2015/04/11 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
高老头读书笔记
2015/06/30 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
V Rising 服务器搭建图文教程
2022/06/16 Servers
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers