mardi 18 avril 2017

How to run a jquery function only when viewport width is less than chosen ?

I would like to run a jquery function only when vieport width is less than 816 px but i can't get it to work..Can someone tell me what am i doing wrong ?

I'm mostly using google chrome dev tools emulator but it apperars also in my private mobile (Desire 820 (1280x720 screen)).I;ve tried to use window.width but with no succes.

    if ($('body').width() >= 816) {  


        $(function(){
    $('.top-container').data('size','big');

$(window).scroll(function(){
    if($(document).scrollTop() > 0)
    {
        if($('.top-container').data('size') == 'big')
        {
            $('.top-container').data('size','small');
            $('.top-container').stop().animate({
                height:'8vh'
            },600);
            $('li').toggleClass('scroll');
            $(".top-logo").toggleClass('scroll-logo');
            $('.top-logo > a > img').toggleClass('scroll-logo');




        }
    }
    else
    {
        if($('.top-container').data('size') == 'small')
        {
            $('.top-container').data('size','big');
            $('.top-container').stop().animate({
                height:'18vh'
            },600);


            $('li').toggleClass('scroll').animate({
                },600);  
            $(".top-logo").toggleClass('scroll-logo');
             $('.top-logo > a > img').toggleClass('scroll-logo');

    }
}
           });
           });
    };

Aucun commentaire:

Enregistrer un commentaire