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

<!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. OC 中的属性

    自动合成 (autosynthesis) @property 语法,会做下面两件事情 自动生成存取方法 由编译器生成,编辑器里不会看到这些方法. 向类中添加适当类型的实例变量 在属性前加下划线,作为实 ...

  2. Python小白学习之路（七）—【字典】【字典的功能】【布尔值】

    字典(dict) 基本结构: d = {key1 : value1, key2 : value2 } dict = {'} key : value称为字典的键值对. 每个键 key和值value 之间 ...

  3. 切割数组 - 将一个数组拆分成多个长度为n的数组

    有时候接口返回的数据很长,而前端显示需要分组显示这些数据,这个时候就需要将数组拆分: datas = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]; var arrLen ...

  4. 下载apache-tomcat-9.0.17-windows-x64及安装以及用途

    首先我们先去这个网站下载http://www.apache.org/,进入Tomcat,点击Tomcat9 下载64-bit Windows_zip 当我们下载好了之后解压,把多余的文件删除掉,也可以 ...

  5. 【2018北京集训6】Lcm DFT&FWT

    首先我们来看下此题的模数232792561. 232792561=lcm(1,2,3.......20)+1.这个性质将在求值时用到. 我们将n分解质因数,令$m$为$n$的素因子个数,设n=$\Pi ...

  6. J04-Java IO流总结四 《 FileReader和FileWriter 》

    FileReader和FileWriter的源码相对简单,下面通过分析它们的源码以更好地进行理解这两个流 1. FileReader FileReader实现了读取底层的字节数据并将其转换为字符数据的 ...

  7. Seqlist L 与 Seqlist *L的区别

     Seqlist L结构体变量,SeqlistInsert之后不可以带回新的插入数据.  Seqlist *L 是传结构体指针 用SeqlistInsert之后可以有新的插入.

  8. 51单片机SRF寄存器

    1.21个寄存器介绍        51系列单片机内部主要有四大功能模块,分别是I/O口模块.中断模块.定时器模块和串口通信模块(串行I/O口),如其结构和功能如下图: 图1 51单片机结构和功能图 ...

  9. Camtasia Studio的下载

    不多说,直接上干货! 具体还没写 https://www.techsmith.com/video-editor.html 欢迎大家,加入我的微信公众号:大数据躺过的坑        人工智能躺过的坑 ...

  10. wordcloud+jieba

    Wordcloud各参数含义 font_path : string #字体路径,需要展现什么字体就把该字体路径+后缀名写上,如:font_path = '黑体.ttf' width : int (de ...