如何动态改变DIV样式

在一些网站看到导航栏是透明的，当滚动条往下的时候导航栏就变成了有背景颜色了。（如这个页面的效果：http://demos.creative-tim.com...），思路应该是jquery监听滚动条然后改变class。
但请问具体怎么做的呢？刚学习不太明白，希望有人能指点一下，最好是有例程参考！谢谢！

jquery css

阅读 4.8k

2 个回答

得票最新

scort

8.4k2633

发布于
2016-11-22

✓ 已被采纳

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="jquery.js"></script>
    </head>
    <body>
           <div style="width:100%;height:100px;position:fixed;background: red"></div>
           <div style="width:100%;height:2000px;background:blue;";></div>      
    </div>

    </body>
<script type="text/javascript">
    $(document).scroll(function(){
        if($(document).scrollTop() > 300)
            $('div:first').css('background','white');
        else
            $('div:first').css('background','red');
    })
</script>
</html>