Ausführen von Skript auf der Grundlage der Bildschirmgröße

Question

Ich versuche, ein Skript nur ausführen, wenn die Bildschirmgröße größer als 750 Pixel ist, wenn es nicht dann das Skript nicht ausgeführt wird. Ich habe versucht, etwas Code dafür zu schreiben, aber es funktioniert nur bei der Seitenaktualisierung. Zum Beispiel, mein Skript macht mein Side Panel (.link-panel) zu stoppen, wenn es die (.footer) erreicht. Wenn ich meinen Bildschirmgrößencode einstelle, funktioniert er, wenn ich die Größe des Bildschirms auf 750px reduziere, aber wenn ich die Größe der Größe ändere, funktioniert das Skript nicht richtig und die Seite muss aktualisiert werden, damit sie wieder funktioniert.

jQuery (erste Lösung)

if ($(window).width() >= 750) { 
    var windw = this; 
    $.fn.followTo = function(elem) { 
     var $this = this, 
      $window = $(windw), 
      $bumper = $(elem), 
      bumperPos = $bumper.offset().top + -40, 
      thisHeight = $this.outerHeight(), 
      setPosition = function() { 
       if ($window.scrollTop() > (bumperPos - thisHeight)) { 
        $this.css({ 
         position: 'absolute', 
         top: (bumperPos - thisHeight) 
        }); 
       } else { 
        $this.css({ 
         position: 'fixed', 
         top: 60 
        }); 
       } 
      }; 
     $window.resize(function() { 
      bumperPos = pos.offset().top; 
      thisHeight = $this.outerHeight(); 
      setPosition(); 
     }); 
     $window.scroll(setPosition); 
     setPosition(); 
    }; 

    $('.cover').followTo('.footer'); 

} 

jQuery zweite Lösung

if ($(".link-panel").css("float") == "left") { 
    var windw = this; 
    $.fn.followTo = function(elem) { 
     var $this = this, 
      $window = $(windw), 
      $bumper = $(elem), 
      bumperPos = $bumper.offset().top + -40, 
      thisHeight = $this.outerHeight(), 
      setPosition = function() { 
       if ($window.scrollTop() > (bumperPos - thisHeight)) { 
        $this.css({ 
         position: 'absolute', 
         top: (bumperPos - thisHeight) 
        }); 
       } else { 
        $this.css({ 
         position: 'fixed', 
         top: 60 
        }); 
       } 
      }; 
     $window.resize(function() { 
      bumperPos = pos.offset().top; 
      thisHeight = $this.outerHeight(); 
      setPosition(); 
     }); 
     $window.scroll(setPosition); 
     setPosition(); 
    }; 

    $('.cover').followTo('.footer'); 

} 

Meine zweite Lösung läuft nur das Skript, wenn meine Eigenschaft float auf .link-panelleft ist. Meine -Eigenschaft wird in einer Medienabfrage entfernt, wenn die Seite 750px ist. Diese Lösung funktioniert nur bei Seitenaktualisierungen wie die letzte Lösung. Wie kann ich es so machen, dass, wenn der Benutzer die Größe von < = 750px auf> 750px ändert, sie die Seite nicht aktualisieren müssen, damit das Skript ordnungsgemäß funktioniert?

Answer 1

Für die zweite Option legen Sie die if-Anweisung, die die CSS-Eigenschaft innerhalb der Fenstergröße ändern Ereignis überprüft, wie:

$(window).resize(function(){  
    if($(".link-panel").css("float") == "left"){ 
     -- Rest of code here -- 
    }else{ 
     -- Other option if check is false -- 
    } 
}); 

Dies ist (meiner Meinung nach) der beste Weg, um zu tun, was Sie tun möchten, da css media-Abfragen sehr spezifisch gestaltet werden können, wenn Sie an einer Responsive Site arbeiten.

Answer 2

Wickeln Sie Ihren Code in Funktion und rufen Sie zweimal, über $(document).ready() und $(window).resize(), rufen Sie Ihre Funktion zweimal, müssen Sie jedes Mal erneut überprüfen window resize Ereignis.

Ich füge Probe unten, überprüfen Sie es, versuchen Sie die Größe des Bildschirms. Wenn Sie die ganze Seite verwenden und wieder normal arbeiten, können Sie sehen, dass die Breite aktualisiert wird. weil Ihr Code nur einmal ausgeführt wird.

function mydocwidth(){ 
 
    console.log($(document).width()); 
 
    //put your code here 
 
} 
 

 
$(document).ready(function(){ 
 
    mydocwidth(); 
 
}); 
 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>