js 锚点联动 回调渲染改变a标签 定位 滚动 导航

本文出自：

http://blog.csdn.net/wyk304443164

直接放代码，道理很简单应该看得懂

/**
 * Created by wuyakun on 2017/7/11.
 */

var head_footer = {};

head_footer.reSetM = function () {
    //锚点 #id
    var thisId = window.location.hash;
    var allA = $('#m_select > li').find('a');
    for (var i = 0; i < allA.length; i++) {
        $(allA[i]).removeClass('select');
    }

    switch (thisId) {
        case '#m-manager':
            $(allA[1]).addClass('select');
            break;
        case '#m-project':
            $(allA[2]).addClass('select');
            break;
        case '#m-client':
            $(allA[3]).addClass('select');
            break;
        default:
            $(allA[0]).addClass('select');
            break;
    }
};

head_footer.allViewSize = [{
    id: '#m-banner'
}, {
    id: '#m-manager'
}, {
    id: '#m-project'
}, {
    id: '#m-client'
}];

//获得每个View的高度跟坐标
head_footer.reGetAllViewSize = function () {
    for (var i = 0; i < head_footer.allViewSize.length; i++) {
        var obj = head_footer.allViewSize[i];
        obj.min = $(obj.id).position().top;
        obj.max = $(obj.id).position().top + $(obj.id).height();
    }
};

$(document).ready(function () {

    //设置锚点选中
    // head_footer.reSetM();

    //开始监听地址栏
    $(window).bind('hashchange', function () {
        // head_footer.reSetM();
    });

    head_footer.reGetAllViewSize();

    //resize
    $(window).resize(function () {
        head_footer.reGetAllViewSize();
    });

    //开始监听滑动
    $(window).scroll(function () {
        //为页面添加页面滚动监听事件
        var wst = $(window).scrollTop(); //滚动条距离顶端值

        // console.log(wst);
        // console.log(head_footer.allViewSize);

        for (var i = 0; i < head_footer.allViewSize.length; i++) {
            var obj = head_footer.allViewSize[i];
            if (wst >= obj.min && wst < obj.max) {

                var allA = $('#m_select > li').find('a');
                if ($(allA[i]).hasClass("select")) {
                    return;
                }

                //开始判断选中
                for (var j = 0; j < allA.length; j++) {
                    $(allA[j]).removeClass('select');
                }
                $(allA[i]).addClass('select');
            }
        }

    })

});

原本是通过监听地址栏改变，来修改导航的，后来测试需要在滚动的时候自动选中导航，于是修改成了下面那样。