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);
}

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);
}

• javascript
• html

Share Improve this question Follow edited Aug 3, 2017 at 16:32 Mahesh Babariya 4,57066 gold badges4343 silver badges5555 bronze badges asked Aug 3, 2017 at 16:12 UmarUmar 11322 silver badges88 bronze badges 1

• document.body.offsetBottom evals to undefined – lilezek Commented Aug 3, 2017 at 16:14

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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()