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

偏移底部存在于香草js？

1 个答案: