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

随机推荐

最长上升子序列(LIS)长度及其数量
例题51Nod-1376,一个经典问题,给出一个序列问该序列的LIS以及LIS的数量. 这里我学习了两种解法,思路和代码都是参考这两位大佬的: https://www.cnblogs.com/reve ...
程序猿必备的10款web前端动画插件
1.基于jQuery的瀑布流图片筛选插件瀑布流的展现方式在目前的网页中用得越来越广泛,特别是图片和首页文章的动态加载. 今天分享的这款就是基于jQuery的瀑布流图片筛选插件,我们可以点击图片分类名 ...
转关于HTML5中meta name="viewport" 的用法不同分辨率手机比例缩放
移动端的布局不同于pc端,首先我们要知道在移动端中,css中的1px并不等于物理上的1px,因为手机屏幕的分辨率已经越来越高,高像素但是屏幕尺寸却没有发生太大变化,那就意味着一个物理像素点实际上塞入了 ...
关于使用html2canvas 绘制图片的坑
html2canvas绘制跨域图片之后,会导致画布被污染,从而无法使用canvas的toDateUrl()等方法获取图片数据的方法,这是canvas的限制而并非html2canvas的原因.好了锅甩好 ...
1.Configuration
1.Configuration(public sealed class Configuration) 定义:表示适用于特定计算机.应用程序或资源的配置文件. 此类不能被继承获取实例: Configu ...
Vue项目中导入excel文件读取成js数组
1. 安装组件 cnpm install xlsx --save 2. 代码 <template> <span> <input class="input-fil ...
bzoj 3011
传送门: http://www.lydsy.com/JudgeOnline/problem.php?id=3011 一想到这个第一反应是树形dp,然后10^18 (' ' ) 所以我直接搞了一个 ...
Python基础教程（005）--为什么要学习Python？
前言为什么要选择Python学习知识点因为Python代码量少. 同样一个问题,用不同的语言,代码量差距还是很大的.一半情况下,Python是java的1比5,所以说,人生苦短,我用Python ...
Python每日一题 004
将 0001 题生成的 200 个激活码(或者优惠券)保存到 Redis 非关系型数据库中. 代码 import redis import uuid # 创建实例 r=redis.Redis(&quo ...
eclipse run error:g++ not found in Path
网上有人说: 在eclipse下 windows-->Preference-->C/C++-->Build-->Setting然后选择Discovery标签,将里面的内容全部R ...

jQuery实现网页定位导航

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

随机推荐

热门专题