JS判断元素到顶部并固定

目录

JQuery

JS

js获取document节点 

JS中offsetTop、clientTop、scrollTop各属性介绍

---

 JQuery

 当页面滚动290像素后 class为userCentLeft的元素悬浮

   $(document).scroll(function () {
      // 滚动到上面  隐藏
      $(window).scroll(function () {
        let top = $(window).scrollTop()//窗口滚动距离
        if (top >= 290) {
          $('.userCentLeft').addClass('fixed-card')
        } else {
          $('.userCentLeft').removeClass('fixed-card')
        }
      })
    }

JS

    window.onscroll = function () {
      //为了保证兼容性，这里取两个值，哪个有值取哪一个
      //scrollTop就是触发滚轮事件时滚轮的高度
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    };

scrollTop 

js获取document节点 

document的getElementById('id')方法

document的getElementByClassName('class')方法

document的getElementsByTagName('tag')方法

document的getElementByName('name')方法

JS中offsetTop、clientTop、scrollTop各属性介绍

这里是Javascript中制作滚动代码的常用属性

1.offsetTop

  当前对象到其上级层顶部的距离。

2.offsetLeft

  当前对象到其上级层左边的距离。

3.offsetWidth

  当前对象的宽度。(包括边线的宽)

  与style.width属性的区别在于:

  1)如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比。

  2)而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值

4.offsetHeight

  当前对象的高度。(包括边线的高)

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

  2）而offsetHeight则返回在不同页面中对象的高度值而不是百分比值

5.clientWidth

  是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。

6.clientHieght

  网页可见区域高

7.scrollLeft

  对象的最左边到对象在当前窗口显示的范围内的左边的距离。

  即是在出现了横向滚动条的情况下，滚动条拉动的距离。

8.scrollTop

  对象的最顶部到对象在当前窗口显示的范围内的顶边的距离。

  即是在出现了纵向滚动条的情况下，滚动条拉动的距离。

9.网页正文部分上： window.screenTop

10.网页正文部分左： window.screenLeft

11.屏幕分辨率的高： window.screen.height

12.屏幕分辨率的宽： window.screen.width

13.屏幕可用工作区高度： window.screen.availHeight