<!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. （转）Linux下使用system()函数一定要谨慎

    转:http://my.oschina.net/renhc/blog/53580 曾经的曾经,被system()函数折磨过,之所以这样,是因为对system()函数了解不够深入.只是简单的知道用这个函 ...

  2. Java简单从文件读取和输出

    Java简单从文件读取和输出 用Scanner输入,用PrintStream输出 功能:从in.txt读入,输出到out.txt 代码: package ioTest; import java.io. ...

  3. nteract 使用教程

    安装 直接去官网下载 一路回车 官网 建立python虚拟环境 和我们平时一样 不同的是在建立完之后 要安装一个kernel Using Python3 with pip and a virtual ...

  4. 二：unittest框架配合selenium之xpath定位

    刚开始学习selenium自动化测试时,犯了一个不该犯的错误,偷懒,使用火狐浏览器中的扩展FIREBUG,FIREPATH来辅助定位. 虽然用的定位方法大多数是使用XPATH方法,但是是工具定位出来的 ...

  5. CSS：CSS 字体

    ylbtech-CSS:CSS 字体 1.返回顶部 1. CSS 字体 CSS字体属性定义字体,加粗,大小,文字样式. serif和sans-serif字体之间的区别  在计算机屏幕上,sans-se ...

  6. Socket通信1.0

    Socket通信1.0 服务器端: package page; import java.io.BufferedReader; import java.io.IOException; import ja ...

  7. ( 转)WPF面板布局介绍Grid、StackPanel、DockPanel、WrapPanel

    回顾 上一篇,我们介绍了基本控件及控件的重要属性和用法,我们本篇详细介绍WPF中的几种布局容器及每种布局容器的使用场景,当 然这些都是本人在实际项目中的使用经验,可能还存在错误之处,还请大家指出. 本 ...

  8. pandas读取文件出现路径不存在的问题

    我写的路径是绝对路径,其他的文件读写完全是没有问题的但是pandas就是不行,于是我改写为全路径:'E:/Python/KNN/iris.csv' 即可解决

  9. hdu6395 /// 优先队列dijkstra

    题目大意: 给定无向图的n m为点数和边数 接下来m行给定u v id表示点u到点v间有一条编号为id的边 当由一条边走到另一条边 而两条边的编号不同时 费用+1 优先队列跑dijkstra最短路 按 ...

  10. springbot项目中使用继承

    package com.example.demo.controller; import com.sun.org.apache.bcel.internal.generic.NEW; import org ...