竞博体育 > 前端 > 并且页面向下滚动时,获取页面元素到屏幕窗口的绝对距离

并且页面向下滚动时,获取页面元素到屏幕窗口的绝对距离

设置块元素居窗口中间的位置,元素居窗口位置

竞博体育官方版下载 1

 

竞博体育官方版下载 ,...

随页面滚动显示/隐藏窗口固定位置元素,窗口元素

0.效果

窗口固定位置显示元素,当页面高度大于某高度,并且页面向下滚动时,显示该元素;当页面位置小于某高度,或者页面向上滚动时,隐藏该元素。

竞博体育官方版下载 2

1.html

<p id="selected-case-count">已选: 0</p>

2.css

p#selected-case-count{
      position:fixed;  /*固定元素位置*/
      top:2px;  /*距顶端举例*/
      right:40px; /*距右侧位置*/
      color:red; 
}

3.js

$(function() {
    $("#selected-case-count").hide();
});
var preTop=0;
var currTop=0;
$(function () {
    $(window).scroll(function(){
        currTop=$(window).scrollTop();
        if(currTop<preTop){
            $("#selected-case-count").fadeOut(200);
        }elseif ($(window).scrollTop()>600){
            $("#selected-case-count").fadeIn(500);
        }else{
            $("#selected-case-count").fadeOut(500);
        }
        preTop=$(window).scrollTop();
    });
});

 

0.效果 窗口固定位置显示元素,当页面高度大于某高度,并且页面向下滚动时,显示该...

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

竞博体育官方版下载 3

元素的绝对位置.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');
              }  

        });
  • 首页
  • 电话
  • 软件