-jq-offset()-position()-scrollLeft()||Top()-偏移-距离文档（body）-滚动-

本文链接：https://blog.youkuaiyun.com/miaopasi_poi/article/details/116666970

01-jq-偏移-`offset()`-距离文档

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-left: 100px;
        }

        .son {
            position: absolute;
            left: 100px;
            top: 100px;
            width: 100px;
            height: 100px;

            background-color: red;
        }
    </style>
    <script src="../js/jquery-1.12.4.min.js"></script>
</head>

<body>
    <div class="box">
        <div class="son"></div>
    </div>

    <script>
        $(function () {
            const $son = $('.son')

            // 获取偏移
            console.log($son.offset())

            // 获取具体值：.left || top
            console.log($son.offset().left)
            // 数字（方便加工）

            // 可以修改
            $son.offset({ left: 300 })
            // 本质是在原来的自身的left基础之上，修改自己的left
        })
    </script>
</body>

</html>

注意：
1.可以修改，但是修改本质是在自己的基础之上，修改自己的值。
2.是距离文档，就是body。

02-jq-偏移-`postion()`-定位偏移

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-left: 100px;
        }

        .son {
            position: absolute;
            left: 100px;
            top: 100px;
            width: 100px;
            height: 100px;

            background-color: red;
        }
    </style>
    <script src="../js/jquery-1.12.4.min.js"></script>
</head>

<body>
    <div class="box">
        <div class="son"></div>
    </div>

    <script>
        $(function () {
            const $son = $('.son')

            // 获取定位偏移
            console.log($son.position())
            // 到定位父级的偏移（原来原生的offset家族中的：偏移部分）

            // 获取数据
            console.log($son.position().left)

        })
    </script>
</body>

</html>

注意：
1.获取定位偏移，到定位父级的偏移（原来原生的offset家族中的：偏移部分）
2.只能获取，不能修改。

03-jq-偏移-滚动偏移-`scrollLeft()`-`scrollTop()`

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            width: 2000px;
            height: 2000px;
        }
    </style>
    <script src="../js/jquery-1.12.4.js"></script>
</head>

<body>
    <script>
        // 原生滚动
        // window.onscroll = function () {
        //     console.log('原生滚动了', pageXOffset, pageYOffset)
        // }

        // jq滚动：将原生对象转成jq对象，将事件去掉on即可
        $(function () {
            $(window).scroll(function () {
                console.log('jq滚动了')
                // console.log($(this))

                // 获取滚动距离
                // scrollLeft() || scrollTop()
                console.log($(this).scrollLeft(), $(this).scrollTop())

                // $(this).scrollTop(500)
                // 实际开发中为了兼容处理，不会给window加滚动距离
                $('html,body').scrollTop(0)
                // 实际浏览器的支持：一般要么是html，要么是body
            })
        })
    </script>
</body>

</html>