does offset Bottom exist in vanilla js?

Question

I found this sticky div snippet and altered it so that it appears stuck to the bottom of the window when the div hits the top of the page. I'm just curious is there a method of sorts for offset bottom. Here is the code :-

let Sticky = (function() {
    'use strict';

    let CSS_CLASS_ACTIVE = 'is-fixed';


    let Sticky = {
        element: null,
        position: 0,
        addEvents: function() {
            window.addEventListener('scroll', this.onScroll.bind(this));
        },
        init: function(element) {
            this.element = element;
            this.addEvents();
            this.position = element.offsetTop ;
            this.onScroll();
        },
        aboveScroll: function() {
            return this.position < window.scrollY;
        },
        onScroll: function(event) {
            if (this.aboveScroll()) {
                this.setFixed();
            } else {
                this.setStatic();
            }
        },
        setFixed: function() {
            this.element.classList.add(CSS_CLASS_ACTIVE);
        },
        setStatic: function() {
            this.element.classList.remove(CSS_CLASS_ACTIVE);
        }
    };

    return Sticky;

})();


//  Init Sticky
let sticky = document.querySelector('.sticky');
if (sticky) {
    Sticky.init(sticky);
}

Answer 1

There's no offsetBottom on an element. Top and left are what are used to calculate the offset. If you want a lot more information you could use getBoundingClientRect. It returns information about the position of the element relative to the viewport. You get an object that looks like this:

{
  bottom: 775,
  height: 775,
  left: 0,
  right: 1322,
  top: 0,
  width: 1322
}

You call it like this:

var firstDiv = document.getElementsByTagName('div')[0]
var rect = firstDiv.getBoundingClientRect()