behoben div zeigt beim Scrollen auf Handy

Question

gibt es ein Problem mit dem festen Menü auf meiner Website. Die Idee ist, dass es nach dem Scrollen von 200px (#menu) oben bleibt. also habe ich ein zusätzliches menü erstellt, das erst nach 200px angezeigt wird (# menu-scroll), und verschwindet beim scrollen. All dies mit einer js-Lösung, die ich gefunden habe, und es funktioniert großartig. Das Problem ist jetzt mit der mobilen Version der Website. jetzt nach 200px von scrollen auf meinem handy, das div, das ist immer in display: none, erscheint. Was ich brauche, ist, dass der Code, der das # menu-scroll aktiviert, auf dem Handy nicht mehr funktioniert, so dass das div für das Display unsichtbar bleibt: keines hat es. Ich nehme an, die Antwort ist in js, aber ich weiß js nicht. Also bitte, jede Hilfe wird geschätzt.

jsfiddle: jsfiddle.net/695q9tdx/

meiner Website (versuchen Sie auf mobilen beobachten): http://armandorodriguez.pe/uh/

Dank.

Answer 1

Nun, was Sie könnte, ist diese beim Laden der Seite tun einrichten und wenn es ein Handy/Tablet-Gerät nicht einmal die Scroll-Ereignis-Listener zu erstellen.

Die einfachste Möglichkeit, dies zu erreichen, ist die Verwendung der Zeichenfolge user-agent, die entlang des Objekts JS Navigator gesendet wird.

// This function checks if the userAgent property matches any 
// of the typical mobile/tablet devices, separated by the pipeline '|' 
// character. 
// If no matches are found, the .match function returns null 
// So if (null == null) or (null != null) then we can have a 
// simple boolean return value 
function isDesktop() { 
    var regexStr = /Android|webOS|iPhone|iPod|iPad|Blackberry/i; 
    return (navigator.userAgent.match(regexStr) == null) 
} 

Nun, wenn Sie diese Funktion auf Seite Last als eine Möglichkeit, Gate umfassen die scroll Ereignislogik Sie ziemlich viel, dass die Aktion auf dem Desktop/mobile Geräte deaktivieren:

// Now that we have a way to check if the client is on a Desktop 
// on page load, we can setup a scroll event listener only if 
// he/she isn't on a tablet/mobile device. 
if (isDesktop()) { 

    // **ANYTHING** wrapped within the function(){} statement 
    // parameter you pass into the $(x).scroll() function **WILL** 
    // get executed on each event fire, so you can include multiple 
    // logic checks or functions within it. 
    // Keep in mind though, the more weight added into an event fire 
    // can cause lag on the client side, which is why I recommend 
    // adding an event decoupler in the future 
    $(window).scroll(function(){ 
    if ($(window).scrollTop() > 200) { 
     $("#menu-scroll").fadeIn("fast"); 
    } 
    else if ($(window).scrollTop() < 200) { 
     $("#menu-scroll").fadeOut("fast"); 
    } 
    }); 
} 

ich empfehlen würde das Hinzufügen/Entfernen Sie einige spezielle Klassennamen aus der #menu-scroll, um nicht ständig fadeIn oder fadeOut aufrufen, wenn ein Benutzer scrollt. Auf diese Weise können Sie während des Abhörens des Scroll-Ereignisses eine Logik hinzufügen, die nur ein- oder ausblendet, wenn sie einen entgegengesetzten Klassennamen haben.

Auch noch eine Anmerkung. Dies funktioniert nur so, wie ich es beim Laden von Seiten gesagt habe. Sobald die Seite geladen ist, wenn Sie die Größe des Browsers auf eine kleinere Breite ändern oder verschiedene Geräte testen (d. H. Mit Chrome Developer Tools) werden die Listener nicht aktiviert.

Answer 2

Eine einfache Problemumgehung wäre, den Breite Haltepunkt zu bestimmen und es in eine if-Anweisung um Ihre js einzuschließen.

/* set breakpoint for mobile device */ 
var breakpoint = 777px; 

/* only execute menu code if larger than breakpoint */ 
if($(window).width() > breakpoint){ 

    $(window).scroll(function(){ 
     if($(window).scrollTop() > 200){ 
      $("#menu-scroll").fadeIn("fast"); 
     } 
    }); 
    $(window).scroll(function(){ 
     if($(window).scrollTop() < 200){ 
      $("#menu-scroll").fadeOut("fast"); 
     } 
    }); 
}