jQuery实现网页定位导航
代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>地狗购物网-网页定位导航效果</title>
<style>
* {
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;
top: 100px;
left: 50%;
margin-left: 400px;
width: 50px;
} #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;
} * html, * html body {
background-image: url(about:blank);
background-attachment: fixed;
} * html #menu {
position: absolute;
bottom: auto;
top: expression(100+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(window).scroll(function () {
var items = $("#content").find(".item");
var menu = $("#menu");
var top = $(document).scrollTop();
var currentId = ""; //滚动条现在所在位置的item id
items.each(function () {
var m = $(this);
//注意：m.offset().top代表每一个item的顶部位置
if (top > m.offset().top - 300) {
currentId = "#" + m.attr("id");
} else {
return false;
}
}); var currentLink = menu.find(".current");
if (currentId && currentLink.attr("href") != currentId) {
currentLink.removeClass("current");
menu.find("[href=" + currentId + "]").addClass("current");
}
});
});
</script>
</head>
<body>
<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="1F.jpg" alt=""/></a></li>
<li><a href="#"><img src="1F.jpg" alt=""/></a></li>
<li><a href="#"><img src="1F.jpg" alt=""/></a></li>
<li><a href="#"><img src="1F.jpg" alt=""/></a></li>
<li><a href="#"><img src="1F.jpg" alt=""/></a></li>
<li><a href="#"><img src="1F.jpg" alt=""/></a></li>
<li><a href="#"><img src="1F.jpg" alt=""/></a></li>
<li><a href="#"><img src="1F.jpg" alt=""/></a></li>
<li><a href="#"><img src="1F.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item2" class="item">
<h2>2F 女装</h2>
<ul>
<li><a href="#"><img src="2F.jpg" alt=""/></a></li>
<li><a href="#"><img src="2F.jpg" alt=""/></a></li>
<li><a href="#"><img src="2F.jpg" alt=""/></a></li>
<li><a href="#"><img src="2F.jpg" alt=""/></a></li>
<li><a href="#"><img src="2F.jpg" alt=""/></a></li>
<li><a href="#"><img src="2F.jpg" alt=""/></a></li>
<li><a href="#"><img src="2F.jpg" alt=""/></a></li>
<li><a href="#"><img src="2F.jpg" alt=""/></a></li>
<li><a href="#"><img src="2F.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item3" class="item">
<h2>3F 美妆</h2> <ul>
<li><a href="#"><img src="3F.jpg" alt=""/></a></li>
<li><a href="#"><img src="3F.jpg" alt=""/></a></li>
<li><a href="#"><img src="3F.jpg" alt=""/></a></li>
<li><a href="#"><img src="3F.jpg" alt=""/></a></li>
<li><a href="#"><img src="3F.jpg" alt=""/></a></li>
<li><a href="#"><img src="3F.jpg" alt=""/></a></li>
<li><a href="#"><img src="3F.jpg" alt=""/></a></li>
<li><a href="#"><img src="3F.jpg" alt=""/></a></li>
<li><a href="#"><img src="3F.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item4" class="item">
<h2>4F 数码</h2> <ul>
<li><a href="#"><img src="4F.png" alt=""/></a></li>
<li><a href="#"><img src="4F.png" alt=""/></a></li>
<li><a href="#"><img src="4F.png" alt=""/></a></li>
<li><a href="#"><img src="4F.png" alt=""/></a></li>
<li><a href="#"><img src="4F.png" alt=""/></a></li>
<li><a href="#"><img src="4F.png" alt=""/></a></li>
<li><a href="#"><img src="4F.png" alt=""/></a></li>
<li><a href="#"><img src="4F.png" alt=""/></a></li>
<li><a href="#"><img src="4F.png" alt=""/></a></li>
</ul>
</div>
<div id="item5" class="item">
<h2>5F 母婴</h2> <ul>
<li><a href="#"><img src="5F.jpg" alt=""/></a></li>
<li><a href="#"><img src="5F.jpg" alt=""/></a></li>
<li><a href="#"><img src="5F.jpg" alt=""/></a></li>
<li><a href="#"><img src="5F.jpg" alt=""/></a></li>
<li><a href="#"><img src="5F.jpg" alt=""/></a></li>
<li><a href="#"><img src="5F.jpg" alt=""/></a></li>
<li><a href="#"><img src="5F.jpg" alt=""/></a></li>
<li><a href="#"><img src="5F.jpg" alt=""/></a></li>
<li><a href="#"><img src="5F.jpg" alt=""/></a></li>
</ul>
</div>
</div> </body>
</html>
代码效果：
jQuery实现网页定位导航的更多相关文章
- JQuery和原生JavaScript实现网页定位导航特效
慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...
- 慕课网中网页定位导航中js相关问题总结
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
- [Jquery]网页定位导航特效
描述:左右联动的导航,非常适合展示页面内容多,区块划分又很明显的,点击右边固定导航项时,左边的内容跟着切换.滑动滚动条的时候,右边的导航也随着左边的展示而进行高亮切换. 思路:比较滚动距离和楼层距离( ...
- jquery网页定位导航特效
<!DOCTYPE html> <html lang="en"> <head> <script src="http://code ...
- jquery.nav.js定位导航滚动插件
jQuery.nav.js插件代码: /* * jQuery One Page Nav Plugin * http://github.com/davist11/jQuery-One-Page-Nav ...
- JavaScript定位导航滚动2
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- css3和jquery实现的可折叠导航菜单(适合手机网页)
之前为大家介绍了好几款css3导航,今天为大家在介绍的是一款适合放在手机网页的导航菜单.点击列表图标以下拉式的形式显示菜单,单击关闭,动画关闭.效果相当不错.效果图如下: 在线预览 源码下载 这个 ...
- Jquery对网页高度、宽度的操作
Jquery获取网页的宽度.高度 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: doc ...
- HTML5设计网页熔岩灯导航（navigation bar）插件 已经加上完整源代码
导航栏(navigation bar): 1.指位于页眉区域的,在页眉横幅图片上边或下边的一排水平导航按钮,它起着链接博客的各个页面的作用. 2.网页设计中不可缺少的部分,它是指通过一定的技术手段,为 ...
随机推荐
- shell 中cut
和awk差不多的功能 上面的例子中,把 root:x:0:0:root:/root:/bin/bash 重定向到cut命令里,-d表示分隔符,这里使用冒号: 作为分隔符,-f 表示字段,选择了第1,和 ...
- Qt + VS 【如何添加图片资源】
熟悉qt creator,之后发现其debug能力不如vs强,随后转战 qt + vs. 发现图片资源添加不像qt那样直接添加,vs本身会生成一个qrc,我们可以直接去打开然后添加,不必在自己去添加, ...
- eclipse设置tomcat部署目录地址
参考: https://blog.csdn.net/lvyuan1234/article/details/53418818 右键,open 操作前提是所有项目移除,并且右键clean掉相关数据! 修改 ...
- python学习--第二天 爬取王者荣耀英雄皮肤
今天目的是爬取所有英雄皮肤 在爬取所有之前,先完成一张皮肤的爬取 打开anacond调出编译器Jupyter Notebook 打开王者荣耀官网 下拉找到位于网页右边的英雄/皮肤 点击[+更多] 进入 ...
- shell变量，字符串，数组
一.shell变量定义: 命名只能使用英文字母,数字和下划线,首个字符不能以数字开头: 中间不能有空格,可以使用下划线: 不能使用标点符号: 不能使用bash里的关键字. 变量使用: 使用一个定义过的 ...
- 「NOI2017」游戏 解题报告
「NOI2017」游戏 \(d\)这么小,你考虑直接对\(d\)个东西暴力 枚举\(x\)为\(a\)或\(b\)(\(c\)就不用了,因为\(a,b\)已经包含\(c\))了,剩下的就是个\(2-s ...
- Navicat12破解教程
Navicat12破解教程 1.下载Navicat12 并安装,打开Navicat12 点击14天试用,关闭软件 2.下载注册机: 个人百度网盘(版本更新可能不及时):https://pan.baid ...
- react教程 — 开发 总结
本文章是在熟练使用 VUE 的基础上,对比VUE 功能进行的一个技术总结. 1.react项目快速搭建 https://blog.csdn.net/mapbar_front/article/deta ...
- Vuetify按需加载配置
自己配置vuetify按需加载的步骤,在此记录: 执行npm install vuetify –save 或 yarn add vuetify添加vuetify添加依赖执行npm install -- ...
- 微信小程序中使用阿里ICON图标
由于微信小程序不支持ttf字体,只支持base64的问题,需要把从图库下载下来的字体文件中的ttf文件转码为base64后使用如图 需将图中箭头所指的字体文件通过 https://transfonte ...