Как заставить загружать скрытый класс (который отображается только через JQuery) на mediaquery?

Question

Итак, у меня есть это fiddle здесь, где вы можете видеть. У меня есть один маленький навигатор, и он меняется при прокрутке. Маленький навигатор используется минимально, поскольку фокус нужен на изображении героя; и после этого навигатор становится немного больше и требует от зрителя немного больше внимания.

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

Но я показываю только вторую навигацию с использованием Jquery/JS.

if ($window.scrollTop() > navShiftBreakpoint) { 
     $navContainer.addClass('full');} 
//full = the second nav & //navShiftBreakpoint = 500px 

Я не могу заставить добавить класс в HTML из css, поэтому любая идея о том, как я могу бороться с этой проблемой?

Спасибо за усилия/помощь заранее.

Answer 1

Вы можете использовать скрипт this, чтобы определить, мобильное устройство и если оно есть, не запускать обратный вызов прокрутки и напрямую применять скрытый класс.