führe jQuery-Funktion abhängig von der Fensterbreite aus

Question

Ich habe eine jQuery-Funktion, die ich nur ausführen möchte, wenn das Browserfenster eine minimale Breite hat (die Funktion besteht darin, einen fließenden Scroll-Effekt hinzuzufügen, wenn zwischen internen Links auf der Seite nach oben und unten gegangen wird , aber stören Sie ein Menü, das ich habilitieren möchte, wenn die Breite weniger als die minimale Breite ist), ich bekomme es fast mit den folgenden Zeilen, die beim Laden der Seite und beim Ändern der Fenstergröße ausgeführt werden eine untergeordnete Mindestbreite (keine Wirkung) zu einer mehr als minimalen Breite (Wirkung), aber nicht, wenn rückwärts (von Wirkung zu keine Wirkung). Ist wie etwas fehlt, eine Anweisung zum Löschen vorherigen Code oder Variable in der else-Anweisung, aber ich weiß nicht, was ist. Hier ist die jQuery-Code:

// the code has 3 detection modes for the width of the browser so it is repeated 3 times 
 

 
$(window).on("load resize",function(){ 
 
    if (self.innerWidth > 996) { //first detection mode 
 
    $('a[href*=#]:not([href=#])').click(function() { 
 
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
 

 
     var target = $(this.hash); 
 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
 
     if (target.length) { 
 
      $('html,body').animate({ 
 
      scrollTop: target.offset().top 
 
      }, 1000); 
 
      return false; 
 
     } 
 
     } 
 
    }); 
 
    } 
 
    else { 
 
    // here some instruction that reset values or something that provoke that 
 
    // previous code, loaded when window is > 996 don't be active when window < 996 
 
    } 
 
}); 
 

 
$(window).on("load resize",function(){ 
 
    if (document.documentElement && document.documentElement.clientWidth > 996) { //second detection mode 
 
    $('a[href*=#]:not([href=#])').click(function() { 
 
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
 

 
     var target = $(this.hash); 
 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
 
     if (target.length) { 
 
      $('html,body').animate({ 
 
      scrollTop: target.offset().top 
 
      }, 1000); 
 
      return false; 
 
     } 
 
     } 
 
    }); 
 
    } 
 
    else { 
 
    // here some instruction that reset values or something that provoke that 
 
    // previous code, loaded when window is > 996 don't be active when window < 996 
 
    } 
 
}); 
 

 
$(window).on("load resize",function(){ 
 
    if (document.body > 996) { //third detection mode 
 
    $('a[href*=#]:not([href=#])').click(function() { 
 
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
 

 
     var target = $(this.hash); 
 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
 
     if (target.length) { 
 
      $('html,body').animate({ 
 
      scrollTop: target.offset().top 
 
      }, 1000); 
 
      return false; 
 
     } 
 
     } 
 
    }); 
 
    } 
 
    else { 
 
    // here some instruction that reset values or something that provoke that 
 
    // previous code, loaded when window is > 996 don't be active when window < 996 
 
    } 
 
});

für mich gelöst!

Ich löste die Frage, indem ich etwas tat, was ich von Anfang an getan haben musste, aber meine zeitliche Ignoranz (ich lerne) macht es schwierig, dann zu sehen. Einfach ich beschränke den Effekt, um in einem Abschnitt mit id = "Inhalt" zu arbeiten und nein zu allen Seiten (einschließlich Menüs), um dies zu tun, spezifiziere ich das in der ersten Zeile.

$('#content a[href*=#]:not([href=#])').click(function() { 
 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
 

 
    var target = $(this.hash); 
 
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
 
     if (target.length) { 
 
     $('html,body').animate({ 
 
      scrollTop: target.offset().top 
 
     }, 1000); 
 
     return false; 
 
    } 
 
    } 
 
});

Leider durch die relative Zeitverschwendung, sowieso das intrinsische Problem, dass ich oben definiert ist real, und ich sah andere Beiträge in diesem Netz mit einer sehr ähnlichen Frage; dass der Effekt aktiviert wird, wenn er von nicht aktiv (in einem kleinen Fenster) zu einem aktiven (in einem großen Fenster) übergeht, aber nicht deaktiviert wird, wenn er von aktiv (in einem großen Fenster) zu nicht aktiv (in einem kleinen Fenster) geht und keine Antworten hat.

Answer 1

Sie haben 3 Funktionen an denselben Ereignis-Listener angeschlossen. Probieren Sie eine Funktion mit if else-Anweisungen aus. Etwas wie:

$(window).on("load resize",function(){ 
    if (self.innerHeight > 710) { 
    if (document.documentElement && document.documentElement.clientWidth > 996) { 
     console.log("second detection mode"); 
     $('a[href*=#]:not([href=#])').click(function() { 
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
      if (target.length) { 
       $('html,body').animate({ 
       scrollTop: target.offset().top 
       }, 1000); 
       return false; 
      } 
      } 
     }); 
     } 
    else { 
     console.log("first detection mode"); 
     $('a[href*=#]:not([href=#])').click(function() { 
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
      if (target.length) { 
       $('html,body').animate({ 
       scrollTop: target.offset().top 
       }, 1000); 
       return false; 
      } 
      } 
     }); 
     } 
    } 
    else { 
    console.log("third detection mode"); 
    $('a[href*=#]:not([href=#])').click(function() { 
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
      $('html,body').animate({ 
      scrollTop: target.offset().top 
      }, 1000); 
      return false; 
     } 
     } 
    }); 
    } 
});