2017-04-18 7 views
0

vieportの幅が816px未満の場合にjquery関数を実行したいのですが、動作させることができません。誰かが私に間違っていることを教えてもらえますか?ビューポートの幅が選択されていない場合にのみjquery関数を実行するにはどうすればよいですか?

私は主にGoogle Chrome Devツールエミュレータを使用していますが、私の個人的なモバイル(Desire 820(1280x720スクリーン))にもApperarsしていますが、私はwindow.widthを使用しようとしましたが、

<!-- language: lang-js --> 
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'); 

       } 
      } 
     }); 
    }); 
}; 

<!-- language: lang-html --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
+0

どのようなエラーこれらのことは、コンソール/ F12に戻りますか?現在のコードでは、domを完全にロードせずにjQueryを使用しようとしている可能性があります。 – Webbanditten

答えて

1

これはあなたのためのトリックを行います:

$(window).resize(function() { 

    if ($('body').width() >= 816) { 
    console.log('run my code!'); 
    }; 

    $("body").prepend("<div>" + $(window).width() + "</div>"); 
}); 

$(window).resize(function() { 
 
    
 
     if ($('body').width() >= 816) { 
 
     \t console.log('run my code!'); 
 
     }; 
 
     
 
     $("body").prepend("<div>" + $(window).width() + "</div>"); 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
&nbsp; 
 
</div>

https://jsfiddle.net/p19qkb33/

関連する問題