scroll系列

最新推荐文章于 2024-08-17 10:56:45 发布

Galaksen

最新推荐文章于 2024-08-17 10:56:45 发布

阅读量631

点赞数 1

分类专栏：学习笔记文章标签：三大系列

本文链接：https://blog.csdn.net/qq_41857060/article/details/100111444

版权

学习笔记专栏收录该内容

37 篇文章 2 订阅

订阅专栏

1.scroll(卷页)系列

scrollWidth：元素中内容的实际的宽(包括padding，没有border)，如果没有内容就是元素的宽(width+padding)
scrollHeight：元素中内容的实际的高(包括padding，没有border)，如果没有内容就是元素的高(height+padding)
scrollLeft：向上卷曲出去的距离
scrollTop：向左卷曲出去的距离

scrollWidth/scrollHeight：

如果元素没有内容，或者内容没有超过元素本身的宽高，那么获取的都是元素本身的宽高

<div id="div1">你好</div>或<div id="div1"></div>：（元素本身的宽高）

<div id="div1">你好你好你好你好你好你好</div>：（元素内容的宽高）

scrollLeft/scrollTop：

2.封装getScroll函数

//获取页面向上或者向左卷曲出去的距离的值
    function getScroll() {
        return {
            //向左
            left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
            //向上
            top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
        };
    }

2.1 固定导航栏案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .main {
            margin: 0 auto;
            margin-top: 10px;
            width: 1000px;
        }

        .fixed {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="top" id="topPart">
    <img src="images/top.png" alt=""/>
</div>
<div class="nav" id="navBar">
    <img src="images/nav.png" alt=""/>
</div>
<div class="main" id="mainPart">
    <img src="images/main.png" alt=""/>
</div>
<script>
    function my$(id) {
        return document.getElementById(id);
    }

    //  function getScroll() {
    //    var obj={};
    //    var top1=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;
    //    var left=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft|| 0;
    //    obj.left=left;
    //    obj.top=top1;
    //    return obj;
    //
    //  }

    //  function getScroll() {
    //    var obj={};
    //    obj.left=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft|| 0;
    //    obj.top=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;
    //    return obj;
    //
    //  }


    //  function getScroll() {
    //    var obj = {
    //      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft|| 0,
    //      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    //  };
    //    return obj;
    //
    //  }

    //获取页面向上或者向左卷曲出去的距离的值
    function getScroll() {
        return {
            //向左
            left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
            //向上
            top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
        };
    }

    //浏览器滚动事件
    window.onscroll = function () {
        //判断向上卷曲出去的距离和id="topPart"的div的高度对比
        if (getScroll().top >= my$("topPart").offsetHeight) {
            my$("navBar").className = "nav fixed";
            //navBar此时脱离了文档流,为了使mainPart还保持在原位
            my$("mainPart").style.marginTop = my$("topPart").offsetHeight + "px";
        } else {
            my$("navBar").className="nav";
            my$("mainPart").style.marginTop="10px";
        }
    };
</script>
</body>
</html>