代码：

<!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实现网页定位导航的更多相关文章

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

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

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

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

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

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

  4. jquery网页定位导航特效

    <!DOCTYPE html> <html lang="en"> <head> <script src="http://code ...

  5. jquery.nav.js定位导航滚动插件

    jQuery.nav.js插件代码: /* * jQuery One Page Nav Plugin * http://github.com/davist11/jQuery-One-Page-Nav ...

  6. JavaScript定位导航滚动2

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

  7. css3和jquery实现的可折叠导航菜单(适合手机网页)

    之前为大家介绍了好几款css3导航,今天为大家在介绍的是一款适合放在手机网页的导航菜单.点击列表图标以下拉式的形式显示菜单,单击关闭,动画关闭.效果相当不错.效果图如下: 在线预览   源码下载 这个 ...

  8. Jquery对网页高度、宽度的操作

    Jquery获取网页的宽度.高度 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: doc ...

  9. HTML5设计网页熔岩灯导航（navigation bar）插件 已经加上完整源代码

    导航栏(navigation bar): 1.指位于页眉区域的,在页眉横幅图片上边或下边的一排水平导航按钮,它起着链接博客的各个页面的作用. 2.网页设计中不可缺少的部分,它是指通过一定的技术手段,为 ...

随机推荐

  1. 最长上升子序列(LIS)长度及其数量

    例题51Nod-1376,一个经典问题,给出一个序列问该序列的LIS以及LIS的数量. 这里我学习了两种解法,思路和代码都是参考这两位大佬的: https://www.cnblogs.com/reve ...

  2. C++中表示字符串长度

    string的size(), length() 和 char[]的strlen()都是不包括‘\0'的,他们都是“外貌协会”的,只停留在表面.而sizeof则是从内存角度来反映,它是包括’\0‘的.注 ...

  3. 本地MongoDB服务开启与连接本地以及远程服务器MongoDB服务

    转载:https://blog.csdn.net/sunshinegyan/article/details/80017012 前提:本地已经安装好了MongoDB服务 1启动MongoDB: 方法1: ...

  4. vue img标签用法

    :符号是v-bind的缩写 服务器图片路径和请求本地路径 <img class="v-step-0" id="avatar" :src="myP ...

  5. jsp获取url路径的方法

    如果你请求的URL是  http://localhost:8080/demo/Index.jsp request.getScheme() //输出:http request.getServerName ...

  6. 【Bootstrapt】offset、push、pull

    实现方式的区别: col-md-offset-*,是利用margin-left实现的,col-md-push-*/col-md-pull-*是利用相对定位实现的. 效果的区别: col-md-offs ...

  7. 「NOI2017」蚯蚓排队 解题报告

    「NOI2017」蚯蚓排队 这题真的草 你考虑\(k\)这么小,每次合并两个串,增加的有用串的数量是\(O(k^2)\)的,暴力加入这些串,求一下这些串的Hash值,塞到Hash表里面去 这里采用类似 ...

  8. [CSP-S模拟测试]:蛋糕（区间DP）

    题目传送门(内部题34) 输入格式 第一行,一个正整数$n$.第二行,$n$个正整数$a_i$,保证$a_i$互不相等. 输出格式 一行一个整数表示间宫卓司得到的蛋糕大小总和的最大值. 样例 样例输入 ...

  9. 框架-.NET：ASP.NET Core

    ylbtech-框架-.NET:ASP.NET Core ASP.NET Core是一个免费且开放源代码的Web框架,以及由微软和社区开发的下一代ASP.NET.它是一个模块化框架,既可以Window ...

  10. AutoMapper用法 转载https://www.cnblogs.com/youring2/p/automapper.html

    AutoMapper是对象到对象的映射工具.在完成映射规则之后,AutoMapper可以将源对象转换为目标对象. 配置AutoMapper映射规则 AutoMapper是基于约定的,因此在实用映射之前 ...