JS：导航条（单页面滚动监视）

前端 JavaScript

一、JS原生方法

HTML部分

<!-- 滚动监视按钮 -->
<div id="menu">
    <ul>
        <li><a href="#item1" class="current">1F 男装</a></li>
        <li><a href="#item2">2F 女装</a></li>
        <li><a href="#item3">3F 美妆</a></li>
        <li><a href="#item4">4F 数码</a></li>
        <li><a href="#item5">5F 母婴</a></li>
    </ul>
</div>
<!-- 长页面主体 -->
<div id="content">
    <h1>地狗购物网</h1>
    <div id="item1" class="item">
        <h2>1F 男装</h2>
        <ul>
            <li><a href="#"><img src="1F.jpg" alt=""/></a></li>...
        </ul>
    </div>
    <div id="item2" class="item">
        <h2>2F 女装</h2>
        <ul>
            <li><a href="#"><img src="2F.jpg" alt=""/></a></li>...
        </ul>
    </div>
    <div id="item3" class="item">
        <h2>3F 美妆</h2>
        <ul>
            <li><a href="#"><img src="3F.jpg" alt=""/></a></li>...
        </ul>
    </div>
    <div id="item4" class="item">
        <h2>4F 数码</h2>
        <ul>
            <li><a href="#"><img src="4F.png" alt=""/></a></li>...
        </ul>
    </div>
    <div id="item5" class="item">
        <h2>5F 母婴</h2>
        <ul>
            <li><a href="#"><img src="5F.jpg" alt=""/></a></li>...
        </ul>
    </div>
</div>

CSS部分

/* reset */
* {
    margin: 0;
    padding: 0;
}
body {
    font-size: 12px;
    line-height: 1.7;
}
li {
    list-style: none;
}
/* 长页面内容样式 */
#content {
    width: 800px;
    margin: 0 auto;
    padding: 20px;
}
#content h1 {
    color: #0088bb;
}
#content .item {
    padding: 20px;
    margin-bottom: 20px;
    border: 1px dotted #0088bb;
}
#content .item h2 {
    font-size: 16px;
    font-weight: bold;
    border-bottom: 2px solid #0088bb;
    margin-bottom: 10px;
}
#content .item li {
    display: inline;
    margin-right: 10px;
}
#content .item li a img {
    width: 230px;
    height: 230px;
    border: none;
}
/* 滚动监视按钮样式 */
#menu {
    position: fixed;
    top: 100px;
    left: 50%;
    margin-left: 400px;
    width: 50px;
}
#menu ul li a {
    display: block;
    margin: 5px 0;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    width: 80px;
    height: 50px;
    line-height: 50px;
    text-decoration: none;
    text-align: center;
}
#menu ul li a:hover,
#menu ul li a.current {
    color: #fff;
    background: #0088bb;
}
/* IE 6 兼容 */
/* 防止IE 6 滚动跳变的写法 */
* html, * html body {
    background-image: url(about:blank);
    background-attachment: fixed;
}
* html #menu {
    position: absolute;
    bottom: auto;
    top: expression(100+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
}

JS部分

window.onload = function(){
    window.onscroll = function(){
        var top = document.documentElement ? document.body.scrollTop :document.documentElement.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;
            };
        };
        if (currentId) {
            for (var j = 0; j < menus.length; j++) {
                var _menu = menus[j];
                // href属性获取的是整个link，需以#为界截除获取最后一个元素；
                var _href = _menu.href.split("#");
                if (_href[_href.length - 1] != currentId) {
                    removeClass(_menu, "current");
                }else{
                    addClass(_menu, "current");
                };
            };
        };
    }
}
/* 封装类名函数集：判断、移除、增加、获取（正则表达式版）；
function hasClass(obj, cls){
    return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
}
function removeClass(obj, cls){
    if (hasClass(obj,cls)) {
        var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
        obj.className = obj.className.replace(reg,"");
    };
}
function addClass(obj, cls){
    if (!hasClass(obj, cls)) {
        obj.className += " " + cls;
    };
}
*/
// 封装类名函数集：判断、移除、增加、获取（简单粗暴版）；
function removeClass(obj,cls){
    if(obj.className == cls) {
        obj.className=""
    };
}
function addClass(obj,cls){
    if(obj.className != cls) {
        obj.className = cls
    };
}
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;
}

二、jQuery方法

JS部分

• HTML及CSS部分与JS原生方法同；

$(document).ready(function () {
    $(window).scroll(function () {
        var items = $("#content").find(".item");
        var menu = $("#menu");
        // 滚动条距离顶部的距离；
        var top = $(document).scrollTop();
        // 滚动条现在所在位置的item id；
        var currentId = ""; 
        // 遍历以获取高度；
        items.each(function () {
            var m = $(this);
            // m.offset().top代表每一个item的顶部位置
            if (top > m.offset().top - 300) {
                currentId = "#" + m.attr("id");
            } else {
                return false;
            }
        });
        var currentLink = menu.find(".current");
        if (currentId && currentLink.attr("href") != currentId) {
            currentLink.removeClass("current");
            menu.find("[href=" + currentId + "]").addClass("current");
        }
    });
});

附：参考

慕课：网页定位导航特效
Demo附件