Переопределение JQuery моделирование с помощью CSS для @media

У меня есть некоторые JQuery скрипт, который позиционирует меню на боковой панели для прокрутки вниз с экрана:Переопределение JQuery моделирование с помощью CSS для @media

<head>  
<script type="text/javascript"> 
    jQuery(function($) { 
    function fixDiv() { 
     if ($(window).scrollTop() > 365) 
     { 
     $('#Portfolio-Sidebar-Content-Web').css({'position': 'fixed', 'top': '0', 'margin-top': '20px'}); 
     } 
     else 
     { 
     $('#Portfolio-Sidebar-Content-Web').css({'position': 'static', 'top': 'auto', 'margin-top': '0'}); 
     } 
    } 
    $(window).scroll(fixDiv); 
    fix5iv(); 
    }); 
    </script> 
</head>

Это работает просто отлично на рабочем столе, но ведет себя по-разному при масштабировании на таблетках и мобильный, поскольку div фиксирован на экране и перекрывает содержимое.

Это то, где я бы хотел, чтобы запрос @media ударил и поместил div по-разному, когда на планшете или мобильном устройстве, переопределяя стиль, применяемый сценарием jQuery: (стиль @media расположен в самом низу мой стиль листа)

@media only screen and (max-device-width: 480px) { 
    #Portfolio-Sidebar-Content-Web{ 
     position: fixed !important; 
     top: 0px !important; 
     } 
}

Однако этот код не будет работать для меня:/кажется, стиль JQuery всегда переопределяют позиционирование CSS, которые я применяю, и DIV продолжает прокручивать на любом устройстве.

источник

2013-05-17 JKD

Я думаю, что ваш JS переопределит ваш CSS, даже если его важно. – AJak

Javascript добавляет встроенные стили, '! Important' переопределяет встроенные стили, если они не являются'! Important', так что это, вероятно, не проблема. – adeneo

Вы можете установить jquery только в том случае, если размер экрана соответствует вашему требованию;

<script type="text/javascript"> 
    jQuery(function($) { 
    if ($(window).width() > 759) { 
    function fixDiv() { 
     if ($(window).scrollTop() > 365) 
     { 
     $('#Portfolio-Sidebar-Content-Web').css({'position': 'fixed', 'top': '0', 'margin-top': '20px'}); 
     } 
     else 
     { 
     $('#Portfolio-Sidebar-Content-Web').css({'position': 'static', 'top': 'auto', 'margin-top': '0'}); 
     } 
    } 
    $(window).scroll(fixDiv); 
    fix5iv(); 
    } 
    }); 
    </script>

источник

2013-05-17 21:20:38 Vector

Боюсь, что это не сработало. JQuery все еще срабатывает при просмотре на мобильном устройстве. Я также попытался изменить значение ширины на> 900. – JKD

Вы можете попробовать заменить 'if ($ (window) .width()> 759) {' с 'if (matchMedia ('only screen и (max-width: 480px)') .matches) {' – Vector

Это отключает скрипт как в мобильном, так и в настольном браузере ... – JKD

Переопределение JQuery моделирование с помощью CSS для @media

ответ

Смежные вопросы