Как задать правило для определенного разрешения экрана в javascript?

Question

[blackbb]

Здравствуйте. Есть скрипт на сайте, который при скроллинге страницы фиксирует меню:

<script>
var h_hght = 770; // высота шапки
var h_mrg = 70;    // отступ когда шапка уже не видна
                 
$(function(){
 
    var elem = $('#top_nav');
    var top = $(this).scrollTop();
     
    if(top > h_hght){
        elem.css('top', h_mrg);
    }           
     
    $(window).scroll(function(){
        top = $(this).scrollTop();
         
        if (top+h_mrg < h_hght) {
            elem.css('top', (h_hght-top));
        } else {
            elem.css('top', h_mrg);
            $('#top_nav').css({'position':'fixed','z-index':'11111','margin-left':'250px','background-color':'#D5CAAE'});
        }
    });
 
});
</script>

Как сделать, чтобы этот код действовал только для media all and (min-width: 1200px) {} ?

Answer 1

[Денис]

Если не нужно учитывать IE < 10, то можно использовать matchMedia

if (window.matchMedia('(min-width: 1200px)').matches) {
    $(window).scroll(function(){
        /* ... */    
    }   
}

Comments

[blackbb]

Не работает такой вариант.

[Денис]

blackbb конечно же работает!

[blackbb]

Согласен. Скобку забыл. Спасибо большое. Вот вопрос, мне нужно, чтобы это работало только при разрешении от 1200 и не меньше, min-width: 1200px это правильно в данном случае?

[Денис]

blackbb: да