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

随机推荐

jQuery CSS方法
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
Laravel框架中如何使用事件记录SQL查询到日志
在本文中,我们将说一下如何处理Laravel中的查询日志记录.如果你非常熟悉Laravel框架,Laravel可以选择将所有在当前请求中运行的查询记录在内存中. 查询记录如果,你想要将日志文件保存在 ...
Java中"String.equals()“和"=="的区别
Do NOT use the `==`` operator to test whether two strings are equal! It only determines whether or n ...
每天一个linux命令：nl(12)
nl nl命令读取 file 参数(缺省情况下标准输入),计算输入中的行号,将计算过的行号写入标准输出.在输出中,nl命令根据您在命令行中指定的标志来计算左边的行.输入文本必须写在逻辑页中.每个逻辑页 ...
Linux进程基本原理
主题进程介绍一进程相关概念内核的功用:进程管理.文件系统.网络功能.内存管理.驱动程序.安全功能等在操作系统上会运行多个应用程序,应用程序分配多大的内存都由内核实现程序文件程序和进程的关系 ...
OC学习篇之---对象的拷贝
在前一篇文章中我们说到了如何解决对象的循环引用问题:http://blog.csdn.net/jiangwei0910410003/article/details/41926369,这一篇文章我们就来 ...
TextView详解
android:autoLink设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web /email/phone/map/all)android: ...
AcWing 209. 装备购买（高斯消元线性空间）打卡
脸哥最近在玩一款神奇的游戏,这个游戏里有 n 件装备,每件装备有 m 个属性,用向量z[i]=(ai,1,ai,2,..,ai,m)z[i]=(ai,1,ai,2,..,ai,m) 表示,每个装备需要 ...
2017 NOIp 初赛体验
很菜...我还是太蒟蒻了. d 老师太强了... 应该能有七十几分初赛稳了 Update: 五十几分...
switch 使用使用小技巧
for (int i=0;i<100;i++) { switch (i) { case 1 ... 10: NSLog(@"case 1 ... 10: = %d",i); ...

jQuery实现网页定位导航

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

随机推荐

热门专题