window.onscroll实现下滑页面时，导航栏发生变化，但是实现不稳定，也很卡

Question

用window.onscroll实现现在很流行的当页面往下滑动的时候，导航栏的渲染会发生变化然后置顶，明确一点就是，当向下滑动的时候给导航栏增加一个类名，否则删除这个类名。我写的可以实现，但是不稳定，有时候就需要多滑动几次才会发生变化，而且如果当页面不处于最开始的位置进行刷新的话，就不会实现。
这是我的这部分js代码：

window.onscroll = function() {
    var topScroll = document.body.scrollTop; //滚动的距离,距离顶部的距离
    var index_nav = document.getElementById("index_nav");
    if (topScroll >= 30) {
        addclass(index_nav, "top_nav_collapse");
    } else {
        removeclass(index_nav, "top_nav_collapse");
    }
}

然后这是我的addclass和removeclass代码，这部分应该是没有问题的

function addclass(element, value) {
    if (!element.className) {
        element.className = value;
    } else {
        var newClassName = element.className;
        newClassName += " ";
        newClassName += value;
        element.className = newClassName;
    }
}

function removeclass(element, value) {
    if (element.className) {
        var allClassName = element.className.split(" "); //得到所有类名
        for (var i = 0; i < allClassName.length; i++) {
            if (allClassName[i] == value) {
                allClassName.splice(i, i); //删除第i位元素，删除一位
                break;
            }
        }
        var result;
        var listName = allClassName;
        for (var j = 0; j < listName.length; j++) {
            if (j == 0) {
                result = listName[j];
                result += " ";
            } else {
                result += listName[j];
                result += " ";
            }
        }
        element.className = result;
    }
}

拜托拜托~求解决~

Answer 1

1.你代码最耗性能的地方是getElementById，每次都获取dom， 应该缓存起来
2.楼上说了的防抖与节流
3.如果移动端，直接用elem.classList.add() 这种方法就可以了

一般实践中解决第一条应该不卡了

Answer 2

问题已解决，这是改正之后的代码，用了楼上的解决方法。

最耗性能的地方是getElementById，每次都获取dom， 应该缓存起来

function onscroll_a() {
    var index_nav = document.getElementById("index_nav");
    var top = document.getElementById("top");
    window.onscroll = function() {
        if (document.body.scrollTop >= 50) {
            addclass(index_nav, "top_nav_collapse");
        } else {
            removeclass(index_nav, "top_nav_collapse");
        }
        if (document.body.scrollTop != 0) {
            top.style.display = 'block';
        } else {
            top.style.display = 'none';
        }
    };
}

Answer 3

关键字： 防抖与节流