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

<!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. 如何让IE 低版本下支持 css3属性

    依赖源  该文件为  ie-css3.htc    (特别提示.htc为二进制文件,只会在ie中识别,让IE浏览器支持CSS3的一些属性) 以下为依赖文件源码 通过源码我们可以看到 该文件在一定程度上 ...

  2. 【mNOIP模拟赛Day 1】 T2 数颜色

    题目传送门:https://www.luogu.org/problemnew/show/P3939 题外话:写完这题后本地跑了下极限数据,用时1.5s,于是马上用fread+fwrite优化至0.3s ...

  3. json，DataTable，model

    1.DataTable转json public class DataTableConvertJson { #region dataTable转换成Json格式 /// <summary> ...

  4. PHP 修改目录下所有与文件夹重名的前缀文件为index.后缀

    <?phpset_time_limit(0); function traverse($path = '.' , $dir_name='') { $current_dir = opendir($p ...

  5. 【Express系列】第2篇——主程序的改造

    上一篇对项目的目录结构和 app.js 等一些文件做了一些改造,然而那只是开始. 接下来将做进一步的改造和完善. 我们先看看几个主要的脚本文件,下面的代码是我稍微修改过并添加注释的,方便理解每句代码的 ...

  6. ubuntu16.04 nginx安装

    .gcc.g++依赖库 apt-get install build-essential apt-get install libtool .安装 pcre依赖库(http://www.pcre.org/ ...

  7. 在 mac 上利用 homebrew 安装软件

    在mac经常需要安装一些软件,你可以通过app store下载,或者可以通过浏览袭搜索下载.这里介绍通过homebrew安装一些软件,它会自动为你下载一些软件的相关依赖,免去安装的烦恼. 首先我们需要 ...

  8. git升级后jenkins的报错

    1.首先卸载原有的git #yum remove git 2.源码安装新版本的git https://www.kernel.org/pub/software/scm/git/ 下载最新的版本,然后编译 ...

  9. rails 国际化、validate校验、flash提示

      1.Rails的国际化 根据特定的locale信息,提取相应的内容 通过config/environment.rb,指定应用的转换文件 config.i18n.load_path +=Dir[Ra ...

  10. CentOS install搭建SVN服务器

    安装步骤如下: 1.命令:yum install subversion 之后会打印很多消息,显示 Complete! 则完成. 2.查看 svn 版本:svnserve --version 3.创建S ...