Использование Sticky Text JQuery только на рабочем столе

Question

Новое во всех вещах, кодирующих здесь - я обнаружил, что этот код заставляет мой текст плавать рядом с моими изображениями, когда вы прокручиваете, и он отлично работал в настольном представлении, но в мобильном режиме текст течет за изображениями.

<script>
  $(document).ready(function(){
    $("#sticky").sticky({topSpacing:10}); 
    $("#sticky").sticky({bottomSpacing:1450}); 
  });
</script>

Итак, сейчас я пытаюсь выяснить, как этот код работает только на экранах размером более 640 пикселей. Я нашел это:

if(window.outerWidth < 640) {
  alert('your jquery code here - it fires for mobile device only');
}

но когда я собрал его и изменил с менее чем 640 на больше чем - код не работает:

if(window.outerWidth > 640) {
  alert(  $(document).ready(function(){
    $("#sticky").sticky({topSpacing:10}); 
    $("#sticky").sticky({bottomSpacing:1450}); 
  });
);
}

Может кто-нибудь сказать мне что я делаю не так? Любая помощь с решением будет принята с благодарностью!

Answer 1

Вам не нужен java скрипт для этого. Это легко сделать с помощью медиазапросов . Вы также можете изменить верхний и нижний интервал для мобильного просмотра (по умолчанию будет применяться для рабочего стола) в вашем случае.

Точно так же:

@media only screen and (max-width: 640px) { 
   //Your code
   #sticky{
      margin: 0; //or whatever
    }
}

Этот код будет встроен в css, связанный с файлом html, и будет автоматически запущен, когда экран будет уменьшен до 640 пикселей.

Answer 2

Код будет инициализироваться при загрузке страницы, при изменении размера окна ничего не произойдет, поскольку вы не прослушиваете это событие, и оно уже инициализировано после загрузки страницы.

Таким образом, вы можете прослушать событие изменения размера и, если условие соответствует, инициализировать или просто открепить элемент, используя метод unstick().

$(window).resize(function() {
 if(window.outerWidth > 640) {
    $("#sticky").sticky({topSpacing:10, bottomSpacing:1450}); 
 } else{
    // unstick the element
    $("#sticky").unstick()
 }
}).resize();

---

Или вы можете используйте css медиазапросы для переключения между 2 элементами.

#sticky { display:block; }
#stickyMob { display:none; }

@media only screen and (max-width: 640px) {
  #sticky{ display: none;}
  #stickyMob { display:block; }
}