Wie funktioniert mein if (condition) nur wenn es> 768 px ist?

Question

Mein Skript funktioniert, aber es funktioniert nur auf halbem Weg, da gebe ich wenn (Bedingung) und es funktioniert erst nach Aktualisierung des Cache im Browser.

Mein Hauptziel ist mein subheader fixiert auf Desktop-Version zu machen und es sollte

auf mobilen Geräten nicht festgelegt werden, Dies ist mein Code

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

Ich schlage vor, diese für die exakte Ausgabe mit Hilfe von CSS zu verwenden. $(window).width(); kann in verschiedenen Browsern unterschiedlich sein. Daher können wir mit Hilfe von css und media query das gewünschte Ergebnis erzielen.

.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

es erst nach Aktualisierung des Cache funktioniert der Browser.

Sie zuweisen den Event-Handler nur dann, wenn windowWidth > 768 und Ihren Code nicht an sich ändernde windowWidth auch zu reagieren scheinen.

Verwenden resize Veranstaltung und stellen Bedingungen innerhalb des Event-Handler

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