浏览器加载 滚动 视窗窗口大小改变事件

发布于 2020-04-08  469 次阅读

1.window.onload      浏览器加载事件

当浏览器中,所有的标签,所有的标签内容,都加载完毕之后,才会执行其中定义的JavaScript程序
如果有一些内容,需要通过请求加载,需要时间,没有加载完毕,JavaScript程序不会执行
        window.onload = function(){
            console.log('浏览器加载好了');
        }

2. window.onscroll    浏览器滚动事件 / 浏览器滚动条监听事件

浏览器页面,上下/左右滚动,都会触发这个事件

3. window.onresize    浏览器视窗窗口大小改变事件

只要浏览器是窗口,高度,宽度,发生变化,都会触发
        window.onresize = function(){
            console.log('浏览器变了');
        }

4.吸顶效果demo

htmlcssjs
        <div>我是吸顶的div</div>
        *{
            margin: 0;
            padding:0;
        }
        body{
            height: 5000px;
        }
        div{
            width: 100%;
            height: 0;
            line-height: 100px;
            font-size: 70px;
            text-align: center;
            color: #fff;
            background: skyblue;
            overflow: hidden;
            transition: all 1s;
            position: fixed;
            top:0;
            left: 0;
        }
        // 获取div 标签对象
        var oDiv = document.querySelector('div');
        // 滚动条监听事件 , 页面只要发生滚动,就会触发事件
        window.onscroll = function(){
            // 1, 获取页面滚动的高度
            var h = document.documentElement.scrollTop || document.body.scrollTop;
            // 2, 添加判断
            if( h > 500 ){
                // 如果滚动高度大于500 , 吸顶div,有高度
                oDiv.style.height = '100px';
            }else{
                // 滚动高度小于等于500 , 吸顶div,高度为0
                oDiv.style.height =0;
            }
        }

一沙一世界，一花一天堂。君掌盛无边，刹那成永恒。