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

<!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. vector.clear()不能用来清零

    vector.clear()函数并不会把所有元素清零,笔者就曾经这样幻想过这个函数的作用,然而事实证明并不是. vector有两个参数,一个是size,表示当前vector容器内存储的元素个数,一个是 ...

  2. 【BZOJ3625】【codeforces438E】小朋友和二叉树 生成函数+多项式求逆+多项式开根

    首先,我们构造一个函数$G(x)$,若存在$k∈C$,则$[x^k]G(x)=1$. 不妨设$F(x)$为最终答案的生成函数,则$[x^n]F(x)$即为权值为$n$的神犇二叉树个数. 不难推导出,$ ...

  3. c#连接oracle的几种方式

    一:通过System.Data.OracleClient(需要安装Oracle客户端并配置tnsnames.ora)1. 添加命名空间System.Data.OracleClient引用2. usin ...

  4. DIV+CSS 按比例等分

    div { display: inline-block; /* 如需支持IE8以下版本,用浮动来做 */ width: calc(100% / 3.09); /* 此处运用了一个css3的表达式,将d ...

  5. Java的注解相关的命令

    与注解处理器的有关的命令有5个,分别如下: (1)-XprintProcessorInfo 输出有关请求处理程序处理哪些注释的信息 (2)-XprintRounds 输出有关注释处理循环的信息 (3) ...

  6. html学习笔记（一）

    认识网页 网页组成 由文字.图片.输入框.视频.音频.超链接等组成. web标准 W3C组织(万维网联盟) Html (结构标准 ),相当人的身体. Css 样式(表现)标准 , 相当与给人化妆 变的 ...

  7. libevent安装总结

    1.先用:ls -al /usr/lib | grep libevent 查看是否已安装:如果已安装且版本低于1.3,则先通过:rpm -e libevent —nodeps进行卸载. 2.下载lib ...

  8. neo4j 查询

    match (p: Node {name:"城关镇"}) return p p 代表的是一个变量,Node为插入neo4j时节点类型,name后面加节点的名称

  9. DAO设计模式(转)

    J2EE开发人员使用数据访问对象(DAO)设计模式把底层的数据访问逻辑和高层的商务逻辑分开.实现DAO模式能够更加专注于编写数据访问代码. 我们先来回顾一下DAO设计模式和数据访问对象. DAO基础  ...

  10. spring boot 2.0 源码分析（四）

    在上一章的源码分析里,我们知道了spring boot 2.0中的环境是如何区分普通环境和web环境的,以及如何准备运行时环境和应用上下文的,今天我们继续分析一下run函数接下来又做了那些事情.先把r ...