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.网页设计中不可缺少的部分,它是指通过一定的技术手段,为 ...

随机推荐

十二、结构模式之门面（Facade）模式
什么是门面模式门面模式(也有翻译为外观模式)是对象的结构模式,外部与一个子系统的通信必须通过一个统一的门面进行.其为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得这一子 ...
common-dbcp2数据库连接池参数说明（转）
转自:http://bsr1983.iteye.com/blog/2092467 由于commons-dbcp所用的连接池出现版本升级,因此commons-dbcp2中的数据库池连接配置也发生了变化, ...
bootstrap.yml
spring: jpa: properties: hibernate.enable_lazy_load_no_trans: true application: name: paycore cloud: ...
【串线篇】实现一个RestfulCRUD
一.概述利用SpringMVC做一个CRUD(增删改查)符合Rest风格的: C:Create:创建 R:Retrieve:查询 U:Update:更新 D:Delete:删除 <%@tagl ...
Qt 浅析Q_PROPERTY宏
最近在使用QProperAnimation画类,研究这个的时候看到别人写的代码有用到 Q_PROPERTY()这个宏,然后查了下,这个宏只有Qt才有的并且需要进行编译,继承于QOBJECT Qt 手 ...
web,xmlSecurity
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://w ...
Spring data jpa 依赖配置
<properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> &l ...
Hibernate 单项多对1
自己理解: 单向1对多. 一个客户可以发出多个订单.但是一个订单只属于一个客户. 写对象的时候.在多的那个类对象把1的作为自己的一个属性. 写配置文件 <many-to-one name=1的属 ...
Python基础(二)：斐波那契数列、模拟cp操作、生成8位随机密码
一.斐波那契数列目标: 编写fib.py脚本,主要要求如下: 输出具有10个数字的斐波那契数列使用for循环和range函数完成改进程序,要求用户输入一个数字,可以生成用户需要长度的斐波那契数列 ...
用 GetEnvironmentVariable 获取常用系统环境变量
以前曾用 GetWindowsDirectory.GetSystemDirectory.GetTempPath 等函数获取系统常用文件夹; 也用过 SHGetSpecialFolderLocation ...

jQuery实现网页定位导航

jQuery实现网页定位导航的更多相关文章

随机推荐

热门专题