Catalog

JQuery

JS

js obtain document node  

JS in offsetTop、clientTop、scrollTop Introduction of each attribute

---

 JQuery

  When the page scrolls 290 After pixels class by userCentLeft Element suspension

   $(document).scroll(function () {
      //  Scroll to the top    hide 
      $(window).scroll(function () {
        let top = $(window).scrollTop()// Window scrolling distance 
        if (top >= 290) {
          $('.userCentLeft').addClass('fixed-card')
        } else {
          $('.userCentLeft').removeClass('fixed-card')
        }
      })
    }

JS

    window.onscroll = function () {
      // To ensure compatibility , Take two values here , Which has value, which one 
      //scrollTop Is the height of the roller when the roller event is triggered 
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    };

scrollTop 

js obtain document node  

document Of getElementById('id') Method 

document Of getElementByClassName('class') Method 

document Of getElementsByTagName('tag') Method 

document Of getElementByName('name') Method 

JS in offsetTop、clientTop、scrollTop Introduction of each attribute

Here is Javascript Common properties for making scrolling code in

1.offsetTop

  The distance from the current object to the top of its superior layer .

2.offsetLeft

  The distance from the current object to the left of its superior layer .

3.offsetWidth

  The width of the current object .( Including the width of the sideline )

  And style.width The difference between attributes is :

  1) For example, the width setting value of the object is percentage width , Whether the page becomes larger or smaller ,style.width All return this percentage .

  2) and offsetWidth Returns the width value of the object in different pages instead of the percentage value

4.offsetHeight

  The height of the current object .( Height including edge line )

  1） And style.height The difference between attributes is : For example, the width of the object is set to percentage height , Whether the page becomes larger or smaller ,style.height All return this percentage

  2） and offsetHeight Returns the height value of the object in different pages instead of the percentage value

5.clientWidth

  Is the visible width of the object , Don't wrap scroll bar equilaterals , Changes with the display size of the window .

6.clientHieght

  Page visible area high

7.scrollLeft

  The distance from the leftmost side of the object to the left side of the object within the display range of the current window .

  That is, when a horizontal scroll bar appears , The distance the scroll bar is pulled .

8.scrollTop

  The distance from the top of an object to the top edge of the object within the range of the current window .

  That is, when the vertical scroll bar appears , The distance the scroll bar is pulled .

9. On the body of the page ： window.screenTop

10. Page body left ： window.screenLeft

11. High screen resolution ： window.screen.height

12. Width of screen resolution ： window.screen.width

13. Screen available workspace height ： window.screen.availHeight