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

<!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. 《JAVA与模式》之代理模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述代理(Proxy)模式的: 代理模式是对象的结构模式.代理模式给某一个对象提供一个代理对象,并由代理对象控制对原对象的引用. 代理模式的结 ...

  2. C#：注册机的实现

    先看界面 软件的实现: SoftReg类: using System; using System.Collections.Generic; using System.Linq; using Syste ...

  3. 支付宝小程序自定义弹窗插件|支付宝dialog插件|model插件

    支付宝小程序自定义弹窗组件wcPop|小程序自定义对话框|actionSheet弹窗模板 支付宝小程序官方提供的alert提示框.dialog对话框.model弹窗功能比较有限,有些都不能随意自定义修 ...

  4. Class与Style绑定

    本文主要介绍如何使用Vue来绑定操作元素的class列表和内联样式(style属性). 因为class和style都是属性,所以通过v-bind命令来处理它们:只需要通过表达式计算出结果即可,不过字符 ...

  5. Spring Security构建Rest服务-1401-权限表达式

    Spring Security 的权限表达式 用法,在自定义的BrowserSecurityConfig extends WebSecurityConfigurerAdapter 配置文件里,每一个a ...

  6. Android 开发工具类 25_getJSON

    获取 JSON 数据并解析 import java.io.InputStream; import java.net.HttpURLConnection; import java.net.URL; im ...

  7. 全网最详细的跑python2.7时出现from mysql import connector ImportError: No module named mysql的问题解决办法（图文详解）

    不多说,直接上干货! C:\Users\lenovo>pip install mysql-connector-python-rf== Collecting mysql-connector-pyt ...

  8. 数据库--oracle图形化管理工具和新增自定义用户

    oracle数据库图形化管理工具: 1 navicat工具很小,操作mySQL和SQLServer非常好用,但对于oracle体验性就有点差,要自己下载编码和替换oci文件.下面是解决的方法教程链接 ...

  9. 机器学习--降维算法：PCA主成分分析

    引言 当面对的数据被抽象为一组向量,那么有必要研究一些向量的数学性质.而这些数学性质将成为PCA的理论基础. 理论描述 向量运算即:内积.首先,定义两个维数相同的向量的内积为: (a1,a2,⋯,an ...

  10. JAVA-5NIO之Selector

    转载:并发编程网:ifeve.com NIO教程 Selector(选择器)是Java NIO中能够检测一到多个NIO通道,并能够知晓通道是否为诸如读写事件做好准备的组件.这样,一个单独的线程可以管理 ...