CODEWITHSUNDEEP
jqueryfunctionwindowsize
gutierrezfredo
gutierrezfredo

Reputation: 5

Stop a Jquery function on a specific window size

I have a function on Jquery, that when the user scrolls down, the animates becoming smaller. But I want that function to stop working when the window size is lower than 1024px...

I mean, when the the window size is lower than 1024px, the wont animate, it will stay the same size always. So this function will work only if the window size is bigger than 1024px.

Here is the code...

$(function(){
    $('header').data('size','big');
});

$(window).scroll(function(){
    if($(document).scrollTop() > 30) 
    {
        if($('header').data('size') == 'big')
        {
            $('header').data('size','small');
            $('header').stop().animate({"height":"60px"}, 200, 'easeOutQuad');
            $('nav ul').stop().animate({"padding-top":"0", "margin":"0.84em 0"}, 200);
            $('#logo').stop().animate({"padding-top":"0.5em", "padding-bottom":"0.6em"}, 200);
            $('#logo img').stop().animate({"width":"170px", "height":"40px"}, 200);
        }
    }
    else
    {
        if($('header').data('size') == 'small')
        {
            $('header').data('size','big');
            $('header').stop().animate({"height":"92px"}, 200, 'easeOutQuad');
            $('nav ul').stop().animate({"padding-top":"0.68em", "padding-bottom":"0.77em", "margin":"1em 0"}, 200);
            $('#logo').stop().animate({"padding-top":"1em", "padding-bottom":"1.35em"}, 200);
            $('#logo img').stop().animate({"width":"215px", "height":"50px"}, 200);
        }  
    }
});

How can I make that happen?...

Upvotes: 0

Views: 904

Answers (1)

lebolo
lebolo

Reputation: 2150

You can use the jQuery .height() or .width() functions. Something like:

$(window).scroll(function(){

    // Check window height or width
    if ($(window).height() <= 1024) return;

    ...

As an aside, you may want to debounce your logic, since this function may be called quite a lot while the user is scrolling (which may affect performance).

Upvotes: 1

Related Questions