JavaScript定位导航滚动2
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>网页定位导航效果</title>
<style type="text/css">
*{
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: 12px;
font-weight: bold;
border-bottom: 2px solid #0088bb;
margin-bottom: 10px;
}
#content .item li{
display: inline;
margin-left:10px ;
}
#content .item li a img{
width: 230px;
height: 230px;
border: none;
}
#menu{
position: fixed;
top: 100px;
left: 50%;
margin-left: 400px;
width: 80px;
}
#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-align: center;
text-decoration: none;
}
#menu ul li a:hover{
color: #fff;
background: #0088bb;
}
#menu ul li .current{
color: #fff;
background: #0088bb;
}
</style>
<script type="text/javascript">
window.onload = function(){
window.onscroll=function(){
var top = document.documentElement.scrollTop || document.body.scrollTop;
var menus = document.getElementById("menu").getElementsByTagName("a");
var items=document.getElementById("content").getElementsByClassName("item"); var currentId="";
for(var i=0;i<items.length;i++){
var _item=items[i];
var _itemTop = _item.offsetTop;
if(top>_itemTop - 200){
currentId=_item.id;
}else{
break;
}
}
if(currentId!=""){
//给正确的menu下的a元素class赋值
for(var j=0;j<menus.length;j++){
var _menu=menus[j];
var _href=_menu.href.split("#");//因为只通过href获取的链接为一长串链接，需要通过#分成数组
if(_href[_href.length-1]!=currentId){
_menu.className = "";
}else{
_menu.className = " 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">
<div id="item1" class="item">
<h2>1F 男装</h2>
<ul>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
</ul>
</div>
<div id="item2" class="item">
<h2>2F 女装</h2>
<ul>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
</ul>
</div>
<div id="item3" class="item">
<h2>3F 美妆</h2>
<ul>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
</ul>
</div>
<div id="item4" class="item">
<h2>4F 数码</h2>
<ul>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
</ul>
</div>
<div id="item5" class="item">
<h2>5F 母婴</h2>
<ul>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
<li><a href="#"><img src="http://img20.360buyimg.com/babel/s340x420_jfs/t15313/103/1889006795/27939/ac735b0f/5a619794N40987404.jpg!q90!cc_340x420" alt=""/></a></li>
</ul>
</div>
</div> <p>原链接：http://www.jb51.net/article/107739.htm</p>
</body>
</html>
效果图：
JavaScript定位导航滚动2的更多相关文章
- jQuery定位导航滚动3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery.nav.js定位导航滚动插件
jQuery.nav.js插件代码: /* * jQuery One Page Nav Plugin * http://github.com/davist11/jQuery-One-Page-Nav ...
- Javascript实现导航锚点滚动效果实例
本篇文章主要介绍了Javascript实现页面滚动时导航智能定位,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页 ...
- JQuery和原生JavaScript实现网页定位导航特效
慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...
- vue2.0模拟锚点实现定位平滑滚动
vue2.0模拟锚点实现定位平滑滚动 效果为点击哪一个标题,平滑滚动到具体的详情. 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 anima ...
- JavaScript目录菜单滚动反显组件的实现
JavaScript目录菜单滚动反显组件,有以下两个特点 每个导航菜单项(nav)对应页面一个内容区域(content) 滚动页面到特定内容区域(content)时,对应的菜单会自动切换,一般会添加一 ...
- 慕课网中网页定位导航中js相关问题总结
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
- jQuery实现网页定位导航
代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <title ...
- css3圆环百分比，菜单栏定位导航
前段时间,社区个人中心改版,看了下设计图,当时隐约感觉到有两个地方(圆环百分比,菜单栏定位导航)比较麻烦.设计图大致如下: 首先看圆环百分比,网上的做法大致分两种,一种是用了CSS3中的transfo ...
随机推荐
- java成神之——ImmutableClass,null检查,字符编码,defaultLogger,可变参数,JavaScriptEngine,2D图,类单例,克隆,修饰符基本操作
ImmutableClass null检查 字符编码 default logger 函数可变参数 Nashorn JavaScript engine 执行脚本文件 改变js文件输出流 全局变量 2D图 ...
- Centos7 第三方仓库 yum 方式安装 PHP7.2
1.卸载原先安装的PHP yum remove php rpm -qa|grep php #列出所有的php相关的rpm包 rpm -e xxx #xxx指的是上一个命令列出的rpm包的包名,复制即可 ...
- 利用JS 在网页上获取并显示当前日期 星期
下边的HTML代码,可以取出日期与星期 <html><body><h1><script language=JavaScript>var d, s = & ...
- mysql忘记root密码的处理方法
在linux下,如果忘记了mysql中root用户的密码可以采用以下办法解决. 1. 修改my.cnf,加入skip-grant-tables 修改mysql的配置文件my.cnf,在[mysqld] ...
- javascript中的装箱和拆箱操作
1,装箱: 把基本数据类型转换为对应的引用类型的操作称为装箱,把引用类型转换为基本的数据类型称为拆箱. 在<javascript高级程序设计>中有这样一句话: 每当读取一个基本类型的时候, ...
- windows 进程监控 Procmon.exe
windows 进程监控 Procmon.exe window下一个程序打开太慢,可以用此程序监控.在哪一步慢了,读取文件还是注册表. ProcessMonitor3.2 Process Monito ...
- js格式化时间和时间操作
js格式化时间 function formatDateTime(inputTime) { var date = new Date(inputTime); var y = date.getFullYea ...
- java Web中页面跳转方式之重定向和请求转发的区别
请求转发: request.getRequestDispatcher().forward(); 重定向: response.sendRedirect(); 例如: 请求转发: request.getR ...
- Yii 2 load() 和 save()
我这里用的数据库是mongo 数据库 为栗子: public function load($data, $formName = null) { $scope = $formName === null ...
- 12-scanf("%*s")与printf("%*s")
在scanf里用*修饰符,是起到过滤读入的作用.比如一个有三列数值的数据,我只想得到第2列数值,可以在循环里用scanf(“%*d%d%*d”,a[i])来读入第i行的第2个数值到a[i]. ...