Question

我的块元素浮动动画的jquery脚本有问题。我只想在窗口宽度大于1024px时才能获得浮动框。

下面的代码工作正常，但是当我在桌面分辨率上打开页面（大于1024）并调整到更小的宽度时，滚动相同的函数来更改css就像更大的分辨率。

当窗口宽度小于1024px时，如何关闭/删除此css？

代码：

$(document).ready(function() {

    function stickyOfferBox() {
            var isMobile;
            if ($(window).width() > 1024) {
                isMobile = false; 

                var $sticky = $('.career-offer-box'),           
                    stickyOffset = $('.career-offer').offset().top - 80,
                    stickyOffsetRight = ($(window).width() - ($sticky.offset().left + $sticky.outerWidth())),
                    stickyWidth = $sticky.width(),
                    stickyHeight,               
                    stickyStopBreakpoint;


                if (!isMobile) {

                    $(window).scroll(function(){

                        var scroll = $(window).scrollTop();

                        if (scroll >= stickyOffset) {
                            $sticky.css({
                                'position': 'fixed',
                                'top': '80px',
                                'right': stickyOffsetRight,
                                'width': stickyWidth
                            });

                            stickyHeight = $sticky.height(); // We want only floating box height instead of static
                            stickyStopBreakpoint = $('#contact').offset().top - stickyHeight ;     

                        } else {
                            $sticky.css({
                                'position': 'relative',
                                'top': 'auto',
                                'right': 'auto',
                                'width': 'auto'
                            });
                        }

                        if (scroll >= (stickyStopBreakpoint - 160)) {
                            $sticky.css({
                                'position': 'absolute',
                                'top': stickyStopBreakpoint - 80,
                                'right': $sticky,
                                'width': stickyWidth
                            });
                        }
                    });
                }
            } else {
                isMobile = true;          
                return false;
            }
        }

    stickyOfferBox();  
    $(window).resize(stickyOfferBox);
});

Answer 1

如果我以正确的方式理解您的代码，您只需从窗口解除滚动事件的绑定。

constructor () {
  super()
  this.handleSubmit = this.handleSubmit.bind(this)
}

你应该创建一个这样的结构：

$(window).unbind('scroll');

在窗口调整大小后运行jquery函数仅用于最小视口宽度

1 个答案: