获取元素到窗口的绝对位置getAbsPoint()

获取页面元素到屏幕窗口的绝对距离。//也就是 元素的死距离。

元素的绝对位置.png
 function getAbsPoint(e)
{
    var x = e.offsetLeft;
    var y = e.offsetTop;
    while(e = e.offsetParent)
    {
        x += e.offsetLeft;
        y += e.offsetTop;
    }
    return {'x': x, 'y': y};
};

如果想获得该元素到屏幕顶部的动态距离,需要监听window的scrollTop的值 减去滚动距离就是元素当前到窗口的 动态距离。
JQ的封装尼普浏览器兼容性问题。

我写的网站实例。
http://homedoctor.xieshoue.org/help/manual.html

function getAbsPoint(e) {
            var x = e.offsetLeft;
            var y = e.offsetTop;
            while (e = e.offsetParent) {
                x += e.offsetLeft;
                y += e.offsetTop;
            }
            return {
                'x': x,
                'y': y
            };
        };
        var $aH5tag_r = $('.block_small').find('h5');
        var abs_y = [];
        
        var $aH5tag_l = $('.help_sidebar').find('h5');

        for (var i = 0; i < $aH5tag_r.length; i++) {
            abs_y.push(getAbsPoint($aH5tag_r[i]).y);
        }

        function checkTopNum(domArr) {
            var _index = -1;

            for (var i = 0; i < domArr.length; i++) {
                if (domArr[i] - $(document).scrollTop() < 10) {
                    _index = i;
                }

            }
            return _index;
        }


        $(window).scroll(function(event) {

            if ($(document).scrollTop() <= 160) {
                $('.catalogue').removeClass('scroll');
            } else {
                $('.catalogue').addClass('scroll');
            }

            $aH5tag_l.removeClass('curr');                    
            if (checkTopNum(abs_y) >= 0) {
               $aH5tag_l.eq(checkTopNum(abs_y)).addClass('curr');
              }  
            
        });

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Window和document对象的区别 window对象window对象表示浏览器中打开的窗口window对象是...
    FConfidence阅读 2,283评论 0 5
  • web下的高度、位置 屏幕、浏览器、页面的高度宽度 NARUTOne 相信各位web开发狮们,在项目中为了搭建漂亮...
    迷缘火叶阅读 3,737评论 0 1
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,817评论 0 8
  • 前几天,在我的朋友圈里,有一位同事晒自己不顾女儿生气,坚持让年幼的她收拾整理玩具的事,获得了大家的点赞。可见,大家...
    青鸾gl阅读 570评论 0 1
  • 那些年,你长得不美,穿着不出众,学习平平,没什么个性,你平凡的简直不可思议。有时候跟别人起了争执,人家吧啦吧啦说了...
    曦梦疯阅读 309评论 3 0