导航栏JS交互效果问题：超出浏览器高度100的时候没有自动执行opacity样式。

if条件判断超出浏览器高度100的时候没有自动执行opacity：0，手动刷新浏览器才能把导航栏透明度设为0.这个问题怎么解决？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        body{
            height:9999px;
        }
        #header{
            position: fixed;
            background: #000;
            width:100%;
            height:100px;
            color:#fff;
            -webkit-transition: background .15s ease-in-out;
            -moz-transition: background .15s ease-in-out;
            -o-transition: background .15s ease-in-out;
            transition: background .15s ease-in-out;
        }
    </style>
</head>
<body>
    <header id="header">
        dddd
    </header>
    <script>
        window.onload = function(){
            var header = document.getElementById("header");
            var iDocHeight = document.body.scrollTop;
            var height = 100;
            if(iDocHeight > height){
                header.style.opacity = '0';
            }else{
                header.style.opacity = '1';
            }
        }
    </script>
</body>
</html>

window.onload的时候document.body.scrollTop为0，你这块代码应该写在滚动事件监听器里。

window.onscroll是监听滚动条事件的，在这个里面判断iDocHeight来控制显示或是隐藏就行

【热门文章】