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

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

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

1 个答案: