慕课网的一个小课程，练习了一遍，不足之处，欢迎指正（照片在本地，大家可以着重看代码哈）：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>爱淘气购物网－JQuery网页定位导航特效</title>

    <style>

    /*All tag*/

    html, body, div, ul, li, img, h1, h2 { margin: 0; padding: 0; }

    ul { list-style: none; }

    a { text-decoration: none; color: #333; }

    /*menu*/

    #menu { position: fixed; top: 100px; left: 50%; margin-left: 400px; }

    #menu > li > a { display: block; padding: 10px 15px; height: 30px; line-height: 30px; font-size: 14px; font-weight: bold; margin: 5px 0; }

    #menu > li > a:hover,

    #menu > li > a.current { color: #fff; background-color: #0088bb; }

    /*content*/

    #content { width: 800px; margin: 30px auto; }

    h1 { color: #0088bb; font-size: 30px; margin-bottom: 10px; }

    .item { border: 1px dotted #0088bb; padding: 20px; margin-bottom: 20px; }

    .item > h2 { font-size: 16px; padding-bottom: 5px; border-bottom: 2px solid #0088bb; margin-bottom: 10px; }

    .item-list > li { display: inline-block; margin-right: 10px; }

    .item-list > li > a > img { width: 230px; height: 230px; border: none; }

    /* IE6 hack*/

    * html, * html body { background-image: url(about:blank); background-attachment: fixed; }

    * html #menu { /*position: fixed*/ position: absolute; top: expression((e = document.documentElement.scrollTop ? e : document.body.scrollTop) + 100 + 'px'); }

    </style>

</head>

<body>

    <ul id="menu">

        <li><a class="current" href="#item1">1F&nbsp;男装</a></li>

        <li><a href="#item2">2F&nbsp;女装</a></li>

        <li><a href="#item3">3F&nbsp;美妆</a></li>

        <li><a href="#item4">4F&nbsp;数码</a></li>

        <li><a href="#item5">5F&nbsp;母婴</a></li>

    </ul>

    <div id="content">

        <h1>爱淘气购物网</h1>

        <div id="item1" class="item">

            <h2>1F&nbsp;男装</h2>

            <ul class="item-list">

                <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&nbsp;女装</h2>

            <ul class="item-list">

                <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&nbsp;美妆</h2>

            <ul class="item-list">

                <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&nbsp;数码</h2>

            <ul class="item-list">

                <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&nbsp;母婴</h2>

            <ul class="item-list">

                <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>

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

    <script>

    $(function() {

        $(window).scroll(function() {

            //滚动条发生滚动时，要获取相应的值

            var top = $(document).scrollTop();

            var menu = $('#menu');

            var items = $('#content').find('.item');

            var currentId = '';

            //获取相应楼层的ID

            items.each(function() {

                var m = $(this);

                var itemTop = m.offset().top;

                if (top > itemTop - 300) {

                    currentId = '#' + m.attr('id');

                } else {

                    return false;

                }

                //给相应楼层的 a 设置 current，取消其他链接的current

                var currentLink = menu.find('.current');

                if (currentId && currentLink.attr('href') != currentId) {

                    currentLink.removeClass('current');

                    menu.find('[href=' + currentId + ']').addClass('current');

                }

            });

        });

    });

    </script>

</body>

</html>

下面再看下JS代码实现：

 <script>

    //定义getByClassName函数，让函数实现根据className获取对象并返回

    function getByClassName(obj, cls) {

        var elements = obj.getElementsByTagName("*");

        var result = [];

        for (var i = 0; i < elements.length; i++) {

            if (elements[i].className == cls) {

                result.push(elements[i]);

            }

        }

        return result;

    }

    //定义hasClass函数，确认对象是否包含对应的class

    function hasClass(obj, cls) {

        return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));

    }

    //定义removeClass函数，让函数实现删除对象的class

    function removeClass(obj, cls) {

        if (hasClass(obj, cls)) {

            //remove

            var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");

            obj.className = obj.className.replace(reg, "");

        }

    }

    //定义addClass函数，让函数实现给对象增加class

    function addClass(obj, cls) {

        if (!hasClass(obj, cls)) {

            obj.className += " " + cls;

        }

    }

    //页面加载完毕执行以下函数

    window.onload = function() {

        //页面滚动时，执行以下函数

        window.onscroll = function() {

            var top = document.documentElement.scrollTop || document.body.scrollTop;

            var menus = document.getElementById("menu").getElementsByTagName("a");

            var items = getByClassName(document.getElementById("content"), "item");

            var currentId = "";

            for (var i = 0; i < items.length; i++) {

                var _item = items[i];

                var _itemTop = _item.offsetTop;

                if (top > _itemTop - 200) {

                    currentId = _item.id;

                } else {

                    break;

                }

            }

            //给正确的menu下的a元素class赋值current

            if (currentId) {

                for (var j = 0; j < menus.length; j++) {

                    var _menu = menus[j];

                    var _href = _menu.href.split("#");

                    if (_href[_href.length - 1] != currentId) {

                        removeClass(_menu, "current");

                    } else {

                        addClass(_menu, "current");

                    }

                }

            }

        }

    }

    </script>

JQuery和原生JavaScript实现网页定位导航特效的更多相关文章

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

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

  2. jquery网页定位导航特效

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

  3. jQuery实现网页定位导航

    代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <title ...

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

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

  5. JQuery Mobile+JS实现智能浮动定位导航条

    实现原理 主要用到几个知识点: 什么是scrollTop? CSS position定位 判断是否为IE6浏览器 元素相对于窗口的距离 原理:1,浏览器向下滚动时,当document的scrollTo ...

  6. jquery及原生javascript对jsonp解决跨域问题实例详解

    jquery方式 前端: $.ajax({ url: 'http://m.xxx.tv/goLottery', data: { data: data }, type: 'GET', dataType: ...

  7. 原生javascript实现网页显示日期时钟效果

    刚接触javascript中Date内置对象时,以为这些方法都太简单了,结果要自己实际操作写一个时钟效果还真一时把我难住了,主要有几点大家要注意的.先看实际效果 要实现这样的效果 某年某月某日星期几几 ...

  8. 抛弃jQuery，拥抱原生JavaScript

    前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操 ...

  9. JavaScript定位导航滚动2

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

随机推荐

  1. cobbler koan自动重装系统

    介绍 koan是kickstart-over-a-network的缩写,它是cobbler的客户端帮助程序,koan允许你通过网络提供虚拟机,也允许你重装已经存在的客户端.当运行时,koan会从远端的 ...

  2. C++基础知识 基类指针、虚函数、多态性、纯虚函数、虚析构

    一.基类指针.派生类指针 父类指针可以new一个子类对象 二.虚函数 有没有一个解决方法,使我们只定义一个对象指针,就可以调用父类,以及各个子类的同名函数? 有解决方案,这个对象指针必须是一个父类类型 ...

  3. (转)ldd 查看程序依赖库

    原文:https://blog.csdn.net/u010977122/article/details/52993560?spm=a2c4e.11153940.blogcont551034.8.4f7 ...

  4. python 代码的缩进位置决定执行部分

    通过近期的代码训练,我发现同样的一个语句,在同一行缩进的位置不同,决定的执行部分也不同.先给一个例子(我想打出1-100中的前20个偶数) 比较第一张图和第二张图.第一张截图实现了我想要的功能.可是当 ...

  5. 搭建互联网架构学习--005--框架初步拆分ssm单一框架

    经过前边的准备步骤,服务器基本搭建完毕,接下来就开始一步步搭建框架了. 拆分单一结构:拆分的目的是为下一步引入dubbo做准备的. 把下边这个单一maven框架进行拆分 这个就是一个简单的maven项 ...

  6. 【链表】Insertion Sort List

    题目: Sort a linked list using insertion sort. 思路: 插入排序是一种O(n^2)复杂度的算法,基本想法相信大家都比较了解,就是每次循环找到一个元素在当前排好 ...

  7. 【数组】Sort Colors

    题目: Given an array with n objects colored red, white or blue, sort them so that objects of the same ...

  8. OkHttp3实现Cookies管理及持久化

    转发自:http://www.codeceo.com/article/okhttp3-cookies-manage.html OKHttp3正式版刚发布了没几天,正好重构之前的代码,于是第一时间入坑了 ...

  9. wordpress 后台404解决办法

    1.vim /usr/local/nginx/conf/wordpress.conf2.rewrite /wp-admin$ $scheme://$host$uri/ permanent;3.ngni ...

  10. 关于文档头部定义和meta元素

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