Fixed with absolute

A few concepts

• offsetWidth: gives you the width the element takes up in pixels.
• offsetHeight: gives you the height the element takes up in pixels.
• clientWidth: gives you the size of the space inside the element, ignoring border width.
• clientHeight: gives you the size of the space inside the element, ignoring border height.
• pageXOffset: returns the number of pixels scrolled along the horizontal axis (left and right).
• pageYOffset: returns the number of pixels the document is currently scrolled along the vertical axis, with a value of 0.0 indicating that the top edge of the Document is currently aligned with the top edge of the window's content area.
• getBoundingClientRect: returns an object with top, bottom, left, and right properties, indicating the pixel positions of the sides of the element relative to the top left of the viewport. If you want them relative to the whole document, you must add the current scroll position, which you can find in the pageXOffset and pageYOffset bindings.
• innerWidth: width (in pixels) of the browser window viewport including, if rendered, the vertical scrollbar.
• innerHeight: height (in pixels) of the browser window viewport including, if rendered, the horizontal scrollbar.
• scrollWidth: a measurement of the width of an element's content, including content not visible on the screen due to overflow.
• scrollHeight: a measurement of the height of an element's content, including content not visible on the screen due to overflow.

Practice

Let's put together the above concepts to achieve fixed position effect with absolute position, as well as scrolling progress functionality.

// fixed.html



    
    
    
    
    


    
 Hello World 
    
horizontal: 0
    
vertical: 0
    

Code Sample

Reference

• Eloquent JavaScript

Notice

• If you want to follow the latest news/articles for the series of reading notes, Please 「Watch」to Subscribe.