香草js中是否存在偏移底部？

Question

我找到了这个粘性 div 片段并对其进行了修改，以便当 div 到达页面顶部时它看起来粘在窗口的底部。我只是好奇是否有一种偏移底部的方法。这是代码：-

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

offsetBottom元素上没有。顶部和左侧用于计算偏移量。如果您想要更多信息，可以使用getBoundingClientRect. 它返回有关元素相对于视口的位置的信息。你会得到一个看起来像这样的对象：

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

你这样称呼它：

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