Как остановить липкий javascript от работы на небольших размерах экрана?

Question

Оба меню и боковая панель моего сайта липкие. Но когда размер экрана меньше 700 пикселей, все div отображаются в одном столбце. Я сделал это с помощью запросов css media. На нижней панели отображается меню, верхняя панель - в середине и боковая панель внизу. Таким образом, когда страница (которая имеет максимальную ширину = 700 пикселей) прокручивается до 150 пикселей, тогда меню накладывается на верх, и, следовательно, основная панель скрыта из-за липкой меню. И когда боковая панель приходит, она также прилипает к вершине.

Это JavaScript:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'/> 
<script src='sticky.js' type='text/javascript'/> 
<script> 
    $(document).ready(function(){ 
     $("#menu,#sidebar").sticky({topSpacing:0}); 
    }); 
</script> 

Пожалуйста, помогите мне в этой щекотливой ситуации. Я хочу, когда размер экрана меньше 700px , тогда меню и боковая панель станут нелипкими.

Answer 1

Использование медиа запросов, вы могли бы сделать что-то вроде этого:

<script> 
    $(document).ready(function() { 
     if(window.matchMedia('(min-width: 700px)').matches) { 
      $("#menu,#sidebar").sticky({topSpacing:0}); 
     } 
    }); 
</script> 

Это предполагает, что единственное, что делает их липкими это JS функцию.

Вы также можете использовать $(window).height() > 700 вместо window.matchMedia('(min-width: 700px)').matches.

Answer 2

... когда размер экрана меньше, чем 700px то Menubar и боковая панель будет стать не липкий ...

Давайте реверс, что. Как насчет: «... когда размер экрана больше 700 пикселей, тогда меню и боковая панель станут липкими ...»?

Я предлагаю проверить разрешение экрана и добавлять только липкие, если на экране больше 700 пикселей. В частности:

<script> 
    $(document).ready(function(){ 
     if ($(window).height() > 700) { 
      $("#menu,#sidebar").sticky({topSpacing:0}); 
    }); 
</script> 

С наилучшими пожеланиями,

Тим.

Answer 3

Вы можете сделать это с помощью запросов css media. Принудительное положение #menu и #sidebar должно быть статическим, если ширина экрана меньше 700 пикселей. Потому что липкая делает свою работу, меняя свое положение на fixed.

<style> 
@media (max-width: 699px) { 
    #menu,#sidebar{ 
    position: static !important; 
    } 
} 
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'/> 
<script src='sticky.js' type='text/javascript'/> 
<script> 
    $(document).ready(function(){ 
     $("#menu,#sidebar").sticky({topSpacing:0}); 
    }); 
</script>