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');            }        }    })});

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