if（条件）を768ピクセル以上にするにはどうすればいいですか？

Question

私のスクリプトは動作しますが、if（条件）を与えてブラウザのキャッシュをリフレッシュした後にのみ動作しているので、半分しか動作しません。

私の主な目標は、私のサブヘッダは、デスクトップ版に固定され、それがモバイルデバイス

に固定されていないされなければならないようにすることです後にキャッシュをリフレッシュだけ働いて

var windowWidth = $(window).width(); 
if(windowWidth > 768){ 
    var fixedMenu = $('.subheader-wrapper.row'); 
    var navOffset = fixedMenu.offset().top; 
    $(window).scroll(function() { 
     var scrollPos = $(window).scrollTop(); 
     if(scrollPos > navOffset) { 
      fixedMenu.addClass('fixed'); 
      fixedMenu.addClass('animated fadeIn'); 
     } 
     else { 
      fixedMenu.removeClass('fixed'); 
      fixedMenu.removeClass('animated fadeIn') 
     } 
     if (window.location.pathname == '/' || window.location.pathname == '/o-kompanii' || window.location.pathname == '/otzyivyi' || window.location.pathname == '/vopros-otvet') { 
      var infoUs = $('#info-us'); 
      var infoUsOff = infoUs.offset().top; 
      if (scrollPos > infoUsOff - 480) { 
       infoUs.find('div:first-child').addClass('animated fadeInLeft'); 
       infoUs.find('div:nth-child(2)').addClass('animated fadeInUp'); 
       infoUs.find('div:last-child').addClass('animated fadeInRight'); 
      } 
     } 

    }); 
} 

Answer 1

を条件を入れて、私は正確な出力のためのCSSの助けを借りて使用するには、このことを示唆しています。 $(window).width();はブラウザによって異なる場合があります。したがって、私たちはCSSとメディアクエリの助けを借りて、望ましい結果を得ることができます。

.test { 
     display: none; 
    } 
    @media only screen and (max-width: 767px) { 
     .test { 
      display: block; 
     } 
    } 

jQueryの

$(window).on("resize" , function() { 
     if (jQuery(".test").is(":hidden")) { 
      // CODE HERE 
     } 
    }); 

Answer 2

私のコードですブラウザ。

あなたはwindowWidth > 768とあなたのコードは、同様windowWidthの変化に応答するようには見えないだけで、イベントハンドラを割り当てています。

使用resizeイベントとイベントハンドラ内

$(window).on("resize" , function() { 
    if ($(window).width() > 768) 
    { 
    //add scroll event now 
    }  
});