jQuery资料之位置操作

最新推荐文章于 2022-01-11 16:04:56 发布

宅羽

最新推荐文章于 2022-01-11 16:04:56 发布

阅读量123

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/sky6even/article/details/103573532

版权

jQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

◆ offset()：

设置或获取被选元素相对于文档的偏移坐标，跟父级没有关系。

该方法有两个属性：left和top。

offset().top  //用于获取距离文档顶部的距离
offset().left  //用于获取距离文档左侧的距离

设置元素的偏移：

offset( { top: 10, left: 30 } );

◆ position()：

返回被选元素相对于带有定位的父级的偏移坐标，如果父级都没有定位，则以文档为准。。

该方法有两个属性：left和top。

position().top  //用于获取距离定位父级顶部的距离
position().left  //用于获取距离定位父级左侧的距离

注：该方法只能获取值。

◆ scrollTop()/scrollLeft()：

设置或获取元素被卷去的头部和左侧。

◆ 示例：

<body>
    <div class="father">
        <div class="son"></div>
    </div>
        
    <div class="back">返回顶部</div>
    <div class="container"></div>
   
    <script>
        $(function() {
            // 1. 获取设置距离文档的位置（偏移） offset
            console.log($(".son").offset());
            console.log($(".son").offset().top);
            // $(".son").offset({
            //     top: 200,
            //     left: 200
            // });
      
            // 2. 获取距离带有定位父级位置（偏移） position   如果没有带有定位的父级，则以文档为准
            // 这个方法只能获取不能设置偏移
            console.log($(".son").position());
      
      		// 3. 被卷去的头部
      		$(document).scrollTop(100);
            // 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
            // 页面滚动事件
            var boxTop = $(".container").offset().top;
            $(window).scroll(function() {
                // console.log(11);
                console.log($(document).scrollTop());
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
            // 返回顶部
            $(".back").click(function() {
                // $(document).scrollTop(0);
                $("body, html").stop().animate({
                    scrollTop: 0
                });
                // $(document).stop().animate({
                //     scrollTop: 0
                // }); 不能是文档而是 html和body元素做动画
            })
        })
    </script>
</body>

宅羽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery资料之位置操作

◆ offset()：设置或获取被选元素相对于文档的偏移坐标，跟父级没有关系。该方法有两个属性：left和top。offset().top //用于获取距离文档顶部的距离offset().left //用于获取距离文档左侧的距离设置元素的偏移：offset( { top: 10, left: 30 } );◆ position()：返回被选元素相对于带有定位的父级的偏移坐标...
复制链接

扫一扫