Feste div auf Scroll

Question

Ich versuche, ein div zu schaffen, das nur eine Klasse erhalten wird beim Scrollen und wenn der Wert des Scroll-210 ist habe ich nächsten Code:

$(document).ready(function() { 
    var pageWidth = $(window).width(); 

    if(pageWidth > 700){ 
     var contentLeft = $('#content-left'); 
     var height = 210; 

     $(window).scroll(function() { 
      if ($(window).scrollTop() < height) { 
       contentLeft.attr('class', 'content-left'); 
      } else { 
       contentLeft.attr('class', 'content-left leftContentFixed'); 
      } 
     }); 
    } 
}); 

ich versuche, diese nur anwenden auf Desktops. Daher brauche ich die Klasse leftContentFixed nicht, wenn es auf einem Smartphone oder Tablet ist.

Wenn ich versuche, so etwas wie:

$(document).ready(function() { 
    var pageWidth = $(window).width(); 

    if(pageWidth > 700){ 
     alert("Bigger than 700"); 
    }else{ 
     alert("Smaller than 700"); 
    } 
}); 

als es perfekt funktioniert, aber mit meinem Code ist es nicht funktioniert. Die Klasse leftContentFixed wird hinzugefügt, obwohl der Bildschirm kleiner als 700 ist.

Irgendwelche Ratschläge?

Answer 1

Sie müssen die Bildschirmgröße auf resize Ereignis prüfen und überprüfen Sie den Wert, wenn Benutzer die Seite scrollt. Sie könnten mobile Variable erstellen und es true/false abhängig von der Bildschirmgröße machen, dann in scroll Callback-Check für seinen Wert und wählen Sie die richtige Klasse.

$(document).ready(function() { 
 
    var pageWidth = $(window).width(), 
 
    height = 210, 
 
    contentLeft = $('.content-left'), 
 
    mobile = false; 
 

 
    $(window).on('load resize', function() { 
 
    pageWidth = $(this).width(); 
 
    // Save mobile status 
 
    if (pageWidth > 700) { 
 
     mobile = false; 
 
    } else { 
 
     mobile = true 
 
    } 
 
    }) 
 

 
    $(window).on('scroll', function() { 
 
    if ($(window).scrollTop() > height) { 
 
     // Set default class 
 
     var _class = 'content-left leftContentFixed'; 
 
     // If mobile then modify class 
 
     if (mobile) { 
 
     _class = 'content-left'; 
 
     } 
 
     contentLeft.attr('class', _class); 
 
    } else { 
 
     var _class = 'content-left'; 
 
     contentLeft.attr('class', _class); 
 
    } 
 
    }); 
 

 
});

html { 
 
    height: 2000px 
 
} 
 

 
.content-left { 
 
    background: gold; 
 
    width: 50px; 
 
    height: 100px; 
 
} 
 

 
.content-left.leftContentFixed { 
 
    position: fixed; 
 
    top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content-left"></div>