TypechoJoeTheme

至尊技术网

统计
登录
用户名
密码
/
注册
用户名
邮箱

jQuery实现页面到滚动到指定位置执行某些操作

2021-05-14
/
0 评论
/
119 阅读
/
正在检测是否收录...
05/14

如果页面滚动到class名为group-pic的元素的位置时开始加载

$(function(){
    var a,b,c;
    a = $(window).height();    //浏览器窗口高度
    var group = $(".group-pic");
    $(window).scroll(function(){
        b = $(this).scrollTop();   //页面滚动的高度
        c = group.offset().top;    //元素距离文档(document)顶部的高度
        if(a+b>c){
            
        }else{
            
        }
    });
});

点击按钮页面底部继续滚动到按钮下方

var height = $(document).height() - $(window).height();
if(!($(document).scrollTop() >= height)){
    var h = $(document).height() - ($(document).height() - $('.btn').offset().top + $(window).height() - $('.btn').height());
    $('body,html').animate({ 
        scrollTop: h
    },500);
}

一些获宽高度的属性:

网页可见区域宽: document.body.clientWidth;
网页可见区域高: document.body.clientHeight;
网页可见区域宽: document.body.offsetWidth   (包括边线的宽);
网页可见区域高: document.body.offsetHeight  (包括边线的宽);
网页正文全文宽: document.body.scrollWidth;
网页正文全文高: document.body.scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的宽: window.screen.width;
屏幕可用工作区高度: window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;

obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。
obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。
obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。

1.offsetTop : 当前对象到其上级层顶部的距离.
不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.

2.offsetLeft : 当前对象到其上级层左边的距离.
不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.

3.offsetWidth : 当前对象的宽度.
与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值

4.offsetHeight : 与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值

经验jsjQuery页面滚动offsetscrollTop
朗读
赞(0)
版权属于:

至尊技术网

本文链接:

https://www.zzwll.cn/archives/5041/(转载时请注明本文出处及文章链接)

评论 (0)