run jquery function after window resize only for minimum viewport width

Question

I have a problem with my jquery script for block element floating animation. I want to get floating box only if window width is greater than 1024px.

Code below works fine, but when I open page on desktop resolution(greater than 1024) and resize to less width, scrolling fire the same functions for changing css like on bigger resolutions.

How can I turn off/remove this css changing when window width will be less than 1024px?

Code:

$(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);
});

Steffen Görg · Accepted Answer · 2017-10-10 13:48:38Z

1

If I understand your code the right way, you simply have to unbind the scroll event from the window.

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

you should create a construct like this:

if($(window).width() >= 1025){

  $(window).scroll(function(){ 

  /** your function code here **/

  });

}else{

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

}

answered Oct 10, 2017 at 13:48

Steffen Görg

3721 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

run jquery function after window resize only for minimum viewport width

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related