jq PC做滚动效果经常用到的各类参数【可视区判断】

时间:2022-09-15 19:11:49
获取 浏览器显示区域 (可视区域)的高度 :
 $(window).height();
 
获取浏览器显示区域(可视区域)的宽度 :
 $(window).width();
 
获取页面的文档高度:
$(document).height();
 
获取页面的文档宽度 :
 $(document).width();
 
浏览器当前窗口文档body的高度:

$(document.body).height();
 
浏览器当前窗口文档body的宽度:
$(document.body).width();
 
获取滚动条到顶部的垂直高度 (即网页被卷上去的高度) :
$(document).scrollTop(); 获取滚动条到左边的垂直宽度 :

$(document).scrollLeft();
 
获取或设置元素的宽度:

$(obj).width();
 
获取或设置元素的高度:
 $(obj).height(); 获取元素的高度带布尔值得:
var itemOuterHeight = $("#item").outerHeight(true);
//这个方法可以传递一个参数true, 如果传递“
true”表示需要求出的高度含有外边距,
否则不含有. 具体视需求而定.
附上一段自己写的代码: --------功能是DIV会随着滚动条滚动而滚动--------
当然这个是存在问题的。他会滚动。但是他会走到最顶部和最低部。需要的效果和CSS还需要在修改一下
这里只是记录一下 // 滚动事件
    // 获取到目标元素
    var item = $("#right");
    // 监听滚动事件
    $(document).scroll(function () {
        // 获取到滚动条距离顶部
        var winScrollHeight = $(document).scrollTop();
        if (winScrollHeight > 74) {
            // 将相应的元素的top设置为滚动条滚动的距离
            item.animate( {top:winScrollHeight-80},20);
        }else {
            item.animate({top:0},10);
        }
    }); 某个元素的上边界到body最顶部的距离:
obj.offset().top;(在元素的包含元素不含滚动条的情况下)

某个元素的左边界到body最左边的距离:
obj.offset().left;(在元素的包含元素不含滚动条的情况下)

当页面滚动时,元素随页面滚动,该元素距离顶部的距离
obj.offset().top(在元素的包含元素含滚动条的情况下)