<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="UTF-8">
<script src="main.js"></script>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id="content">
<div id="floor1" class="item" >
<h2>1F</h2>
<ul>
<li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/1.jpg" alt="未显示"></a></li>
</ul>
</div>
<div id="floor2" class="item">
<h2>2F</h2>
<ul>
<li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/2.jpg" alt="未显示"></a></li>
</ul>
</div>
<div id="floor3" class="item">
<h2>3F</h2>
<ul>
<li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/3.jpg" alt="未显示"></a></li>
</ul>
</div>
<div id="floor4" class="item">
<h2>4F</h2>
<ul>
<li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/4.jpg" alt="未显示"></a></li>
</ul>
</div>
<div id="floor5" class="item">
<h2>5F</h2>
<ul>
<li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>
<li><a href="#"><img src="data:image/5.jpg" alt="未显示"></a></li>
</ul>
</div>
</div>
<div id="fixed-tool">
<ul>
<li><a href="#floor1" class='current'>淘宝汇吃</a></li>
<li><a href="#floor2">极有加</a></li>
<li><a href="#floor3">格调</a></li>
<li><a href="#floor4">中国质造</a></li>
<li><a href="#floor5">亲宝贝</a></li>
</ul> </div>
</body>
</html>
<!-- 锚点实现的快速定位: 通过a里面+#每层的id名字-->
* {
margin:;
padding: 0
} body {
font: normal 12/24px '宋体' arial;
} .item {
width: 364px;
height: 382px;
border: 1px solid #bfbfbf;
margin-bottom: 20px;
position: relative;
left: 50%;
margin-left: -200px;
} .item h2 {
width: 364px;
font-size: 16px;
font-weight: bold;
background: blue;
text-align: center;
} /*#item ul{margin-left: 17px;margin-top: 20px;}*/ .item ul li {
list-style: none;
float: left;
border: 1px solid #ccc;
height: 120px;
} .item ul li img {
width: 120px;
height: 120px;
} #fixed-tool {
position: fixed;
left: 50%;
margin-left: 300px;
top: 100px;
}
#fixed-tool li{
list-style: none;
}
#fixed-tool li a {
padding:;
display: block;
text-decoration: none;
border-bottom: 1px dotted #ccc;
text-align: center;
width: 40px;
height: 40px;
color: #f93;
} .current{
background: blue;
} /*当margin:0 auto时,margin:left top right 之类的实效
居中显示left:50%;width: 400px;margin-left:-200px; 发现有多个a占据着120x16的高度,通过设置#item ul li高度使其直接占据。 margin:0 auto实效的原因
1.要给居中的元素一个宽度,否者无效。
2.该元素一定不能浮动,否者无效。*/
$(function() {
// $('.fixed-tool ul li a').each(function() {
// $(this).bind('click', function() {
// var $li = $(this).parent();
// $li.addClass('current').siblings().removeClass('current');
// });
// });
$(window).scroll(function() {
var top = $(document).scrollTop(); //屏幕滚动的距离
// console.log(top);
var $item = $('#content').find('.item'); //找到了div
var $menu = $('#fixed-tool'); //找到了工具条
var currentId = ''; //当前所在楼层的Id
$item.each(function() {
var m = $(this); //每个楼层所在的对象
var itemTop = m.offset().top;//为每个楼层的高度
//获取偏移 有左右
// console.log(m.offset().top);
if (top > itemTop-20) {//这里就解决了临界的问题
currentId = '#' + m.attr('id');//如果大于当前楼层的高度,就把当前楼层的高度赋给currentId
} else {
return false;
//如果已经找到了2,345就不用走了,直接跳出循环,提高效率
}
});
var currentLink=$menu.find('.current');
//如果top很低,则为空,后面的如果刚好为currentId时,就不需要取消
if(currentId&&currentLink.attr('href')!=currentId){
//1是当高度还很低,没达到时,使currentId为空,2是当前的current所对应的a的href属性不为本身时,
currentLink.removeClass('current');//去掉不正确的样式
$menu.find('[href="'+currentId+'"]').addClass('current');//找到正确的链接,加上样式
}
});
// 滚动监听
});
// /jquery通过id获取到的效率比class高/
// 思路是当滚动的距离大于一个楼层的高度时,换到下一个楼层
//这里不需要添加点击事件的原因是,有锚点了。通过锚点的快速定位。

jquery网页定位导航特效的更多相关文章

  1. [Jquery]网页定位导航特效

    描述:左右联动的导航,非常适合展示页面内容多,区块划分又很明显的,点击右边固定导航项时,左边的内容跟着切换.滑动滚动条的时候,右边的导航也随着左边的展示而进行高亮切换. 思路:比较滚动距离和楼层距离( ...

  2. JQuery和原生JavaScript实现网页定位导航特效

    慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...

  3. jQuery实现网页定位导航

    代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <title ...

  4. 慕课网中网页定位导航中js相关问题总结

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  5. jQuery Tocify 定位导航

    Tocify是一个jQuery插件,能够动态的生成文章目录,Tocify可以随意的设置Twitter Bootstrap 或者 jQueryUI Themeroller支持的可选动画和jQuery的显 ...

  6. jQuery实现电梯导航特效

    功能描述: 当滚动条滑到某个位置时,显示电梯导航: 当用户滚动滚动条时,让电梯导航的选中状态和当前滚动到的区域保持一致: 当用户点击电梯导航时,滚动条滚动到被点击导航对应的区域 准备工作: 首先将jQ ...

  7. JavaScript定位导航滚动2

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  9. 纯CSS + 媒体查询实现网页导航特效

    纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...

随机推荐

  1. NX二次开发-基于NX开发向导模板的NX对Excel读写操作(OLE方式(COM组件))

    在看这个博客前,请读者先去完整看完:NX二次开发-基于MFC界面的NX对Excel读写操作(OLE方式(COM组件))https://ufun-nxopen.blog.csdn.net/article ...

  2. 找关键字,分割字符串,输出一个vector

    vector<string> split(const string& str, const string& delim) { vector<string> re ...

  3. KMP概念上小结

    kmp算法的时间复杂度是O(m+n) 主要作用: 1.最长公共前后缀问题 2.原串中含有几个模式串问题 3.循环节问题

  4. Java中的注解是如何工作的?

    自Java5.0版本引入注解之后,它就成为了Java平台中非常重要的一部分.开发过程中,我们也时常在应用代码中会看到诸如@Override,@Deprecated这样的注解.这篇文章中,我将向大家讲述 ...

  5. web前端Vue+Django rest framework 框架 生鲜电商项目实战✍✍✍

    web前端Vue+Django rest framework 框架 生鲜电商项目实战  整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频 ...

  6. MVC--MVP?

    第一部分:什么是MVP?什么是MVC? 1.什么是MVP? M:数据层(数据库.网络.文件存储等等...) V:View和Activity和Fragment以及它们的子类 P:中介->Prese ...

  7. Spring接收数据,传递数据

    Spring接收数据,传递数据 前提配置 POM   <dependency> <groupId>org.springframework</groupId> < ...

  8. Vue报错type check failed for prop

    在报错的'value'属性前面加:或者去掉:即可解决问题.

  9. shell脚本输出空心等腰三角形

    第一种:(for循环) #!/bin/bash#空心等腰三角形arr=9 #定义金字塔的层数for ((i=1;i<=$arr;i++))do for ((j=1;j<=$(($arr-$ ...

  10. 启动eclipse出现JVM terminated. Exit code=127 错误解决办法

    https://blog.csdn.net/wpzsidis/article/details/72954387 进去第二次又错