Funktion nur bei bestimmter Bildschirmbreite

[Waegi]

Hallo,

ich hab mal wieder ein Problem (so wie in letzter Zeit öfters), ich kenn mich erstens mit JavaScript und jQuery gar nicht aus, jedoch hab ich mithilfe von google ein Script gefunden und das auch modifiziert, das mir meine Navigation oben erhält, wenn ich eine bestimmte Entfernung mit dem scrollen zum oberen Rand hab.
Das funktioniert alles auch wunderbar, jedoch möchte ich, dass ab einer bestimmten Bildschirmbreite, das Script nicht mehr ausgeführt werden soll, ich habs mal so probiert, jedoch funktioniert das nicht:

Hier mal mein Script, wie ich es probiert hab:

<script>
      $(function() { 
         var browserWidth = $(window).innerWidth();
         if ((browserWidth) > '1200'){
            var sticky_navigation = function()
            {
               var scroll_top = $(window).scrollTop();
               
               if (scroll_top > 150) { 
                  $("#topnavi").fadeIn();
               } else {
                  $("#topnavi").fadeOut();
               }   
            };
            sticky_navigation();
          
            $(window).scroll(function() {
               sticky_navigation();
            });
         }  
      });
      </script>

Waegi

 

[msa1989]

AW: Funktion nur bei bestimmter Bildschirmbreite

Hab davon auch nicht wirklich Ahnung, aber eventuell eine alternative Lösung.

Du kannst ja mittels CSS das Menü fixieren. Mit ner Media-Query einfach das Menü nicht mehr fixieren, wenn die Bildschirmbreite hoch genug ist?

Reicht dir das?

 

[Waegi]

AW: Funktion nur bei bestimmter Bildschirmbreite

Hallo,

Nein das reicht mir leider nicht, aus dem Grund dass das Menü oben komplett neu gestylet ist und nicht einfach nur fixiert werden kann, hier mal die Website wie sie aktuell ist:

Waegi

 

[radiothek]

AW: Funktion nur bei bestimmter Bildschirmbreite

Hallo,

in der von Dir genutzten Variante kann es nicht richtig funktionieren, in dem Skript wird die Breite von Browserfenster beim laden ermittelt, wenn diese in dem Moment > 1200 ist wird es immer ausgeführt, selbst wenn Du das Browserfenster verkleinerst.

Verschiebst Du den Teil mit der Ermittlung in die Funktion sticky_navigation selbst, prüft diese selbst ob das Fenster breit genug ist.

$(function() { 
                    var sticky_navigation = function()
                    {
                        var browserWidth = $(window).innerWidth();
                        if ((browserWidth) > '1200'){
                          
                           var scroll_top = $(window).scrollTop();
                           
                           if (scroll_top > 150) { 
                              $("#topnavi").fadeIn();
                           } else {
                              $("#topnavi").fadeOut();
                           }  
                        } else {
                             $("#topnavi").fadeOut();
                        }
                    };
                    sticky_navigation();
                  
                    $(window).scroll(function() {
                       sticky_navigation();
                    });
                   
              });

 

[Duddle]

AW: Funktion nur bei bestimmter Bildschirmbreite

Ich habe es nicht lokal ausprobiert, folgende Zeile sollte aber das Problem sein:

if ((browserWidth) > '1200'){

Du vergleichst hier die Zahl in browserWidth mit einer Zeichenkette/String, da Werte in einfachen oder doppelten Anführungszeichen als Strings interpretiert werden. Es ist aber nicht definiert, ob 42 größer als "Apfelkuchen" ist.


Duddle

 

[Waegi]

AW: Funktion nur bei bestimmter Bildschirmbreite

Danke an euch beide, die Lösung von radiothek funktioniert nun wunderbar.

Danke auch dir Duddle, ja ich hab das so gefunden als ich gegooglet hab, hab ja selbst gar kein Plan von jQuery und so, aber danke für die Information.

 

[radiothek]

AW: Funktion nur bei bestimmter Bildschirmbreite

Hallo,

ggf. kannst Du es noch um ein

$(window).resize(function(){     sticky_navigation(); });

erweitern. Damit erfasst Du auch die Änderung der Fenstergröße.

Einfach vor oder direkt nach der

$(window).scroll(function(){..});

einfügen.

 

[Waegi]

AW: Funktion nur bei bestimmter Bildschirmbreite

Ok danke für die Hilfe.