如何重新计算滚动窗口大小？

Question

我有一个粘性元素，当它伸出时('.sticky-bar-behavior'); 在屏幕上，由于滚动的作用，它不再发粘，并变成了一个相对的元素。

这是我到目前为止的代码：

function Sticky($el){
    this.$el = $el;
    this.stickyEl = this.$el.find('.sticky-bar-behavior');
    this.noSticky = this.$el.find('.no-sticky');
    this.whenSticky = this.$el.find('.when-sticky');
    this.shareStickyFooter();
    return this;
}

Sticky.prototype.shareStickyFooter = function(){

    var windowHeight;
    var windowPosition;
    var THIS = this;
    $window.on('scroll', function() {
        windowHeight = $window.height();
        windowPosition = $('.sticky-bar-behavior').position().top;
        if ($(this).scrollTop() + windowHeight >= windowPosition + 300) {
            THIS.$el.removeClass('position-fixed');
            THIS.$el.addClass('position-relative');
            THIS.noSticky.show();
            THIS.whenSticky.hide();
        } else if (windowPosition >= $(this).scrollTop()) {
            THIS.$el.removeClass('position-relative');
            THIS.$el.addClass('position-fixed');
            THIS.noSticky.hide();
            THIS.whenSticky.show();
        }
    })

    return THIS;
};

我遇到的主要问题是，当一些隐藏元素出现时，窗口会更改其大小。 因此，粘性元素在应有的情况下不会成为相对元素。

我将此代码放在scroll功能内：

windowHeight = $window.height();
windowPosition = $('.sticky-bar-behavior').position().top;

但是现在，粘性元素出现了奇怪的故障。

有什么建议吗？

Answer 1

您可以将以下功能用于任何窗口大小调整事件。 每当将动态元素或隐藏元素添加到html模板时，window.resize（）函数都会变为活动状态。

$( window ).resize(function() {
      // Your logics here....
      // ........
    });

此功能可用于窗口高度中的任何大小调整事件，例如隐藏元素显示后增加的高度。