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

问题描述

问 题

用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;
    }
}

拜托拜托~求解决~

解决方案

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

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

这篇关于javascript - window.onscroll实现下滑页面时，导航栏发生变化，但是实现不稳定，也很卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！