javascript - 导航栏JS交互效果问题:超出浏览器高度100的时候没有自动执行opacity样式。
伊谢尔伦
伊谢尔伦 2017-04-11 09:44:52
[JavaScript讨论组]

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>
伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回复(2)
迷茫

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

PHPz

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号