滚动条事件window.onscroll

最新推荐文章于 2024-09-02 13:54:18 发布

weixin_30631587

最新推荐文章于 2024-09-02 13:54:18 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/miangao/p/9970846.html

本文介绍如何使用jQuery获取网页中元素的绝对与相对位置，包括X、Y坐标，并展示了如何通过监听滚动条位置来动态调整特定div元素的位置，确保其随滚动条的变化而移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取页面某一元素的绝对X,Y坐标

var X = $('#ElementID').offset().top;

var Y = $('#ElementID').offset().left;

获取相对(父元素)位置:

var X = $('#ElementID').position().top;

var Y = $('#ElementID').position().left;

相对浏览器，将指定div滚到到指定位置，其用法如下

$("html,body").animate({scrollTop: $(obj).offset().top},speed);

例：统战 DIV随滚动条位置高度发生变化

 // 答题卡位置随滚动条变化
      window.onscroll = function(){
        var a = document.documentElement.scrollTop || document.body.scrollTop;//滚动条y轴上的距离
        var b = document.documentElement.clientHeight || document.body.clientHeight;//可视区域的高度
        var c = document.documentElement.scrollHeight || document.body.scrollHeight;//可视化的高度与溢出的距离（总高度）
        var abc = $('.stb-content-test').offset().top;
        // 若滚动高度大于
        if(abc >= a){
          $('.stb-content-answer-div').css('top', aaa - a + 'px')
          
        }
        else{
          $('.stb-content-answer-div').css('top','0')
        }
      }

转载于:https://www.cnblogs.com/miangao/p/9970846.html