javascript - Vanilla 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 .它返回有关元素相对于视口(viewport)的位置的信息。你得到一个看起来像这样的对象:

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

你可以这样调用它:

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