js如何滚动添加css

window.onscroll = function() { if(document.body.scrollTop>=30){
    $(".header").addClass("header-color");//添加一个类
    return false;
};
};

这个代码无法生效，该如何修改？

window.onscroll = function() { 
    if(document.body.scrollTop>=30 || document.documentElement.scrollTop >=30){
        $(".header").addClass("header-color");//添加一个类
        return false;
    };
};

主要还是兼容性问题，本人测试下来chrome和firefox都正常，但IE8以下就不正常，不知道哪里的问题，求高手解答

你确定有 .header 这个元素吗，你可以打断点调试。

JS代码这样写：


window.onscroll = function() { 
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    if(scrollTop >= 30){
        $(".header").addClass("header-color");//添加一个类
        return false;
    };
};

其次保证你的HTML文件有doctype，最好写上H5的doctype<!DOCTYPE html>

且在head标签中添加

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="renderer" content="webkit">

第一个meta告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。简单的说，就是什么版本 IE 就用什么版本的标准模式渲染。

第二个meta告诉双核浏览器，使用webkit内核渲染网页。

点击看demo

我网站主题介绍的效果

【热门文章】