Фикс нав к началу только на рабочем столе

Попытка исправить СЧА в верхней части экрана, но только на экране widths > 782pxФикс нав к началу только на рабочем столе

До сих пор я получил половину сценарий работает отлично: https://jsfiddle.net/ah4ta7xc/1/

Однако мой метод оставляет ненужный зазор вверху, когда применяется класс sticky-menu.

HTML:

<div id="foo">Logo and stuff</div> 
<div id="main-menu">Site menu</div>

CSS:

body { 
    height: 3000px; 
} 

#foo { 
    height: 50px; 
    background-color: #ccc; 
} 

#main-menu { 
    width: 100%; 
    height: 30; 
    background-color: black; 
    color: white; 
    text-align: center; 
    padding: 10px; 
} 

.sticky-menu { 
    z-index: 10; 
    width: 100%; 
    position: fixed; 
}

JQuery:

$(function(){ 
    if ($(window).width() > 782) { 
     $('#main-menu').addClass('sticky-menu'); 
    } 

    $(window).resize(function() { 
     if ($(window).width() > 782) { 
      $('#main-menu').addClass('sticky-menu'); 
     } 
    else { 
     $('#main-menu').removeClass('sticky-menu'); 
    } 
    }); 
});

источник

2015-03-27 Dan382

Я думаю, что я не понимаю, что вы пытаетесь достичь, если вы хотите такое же расположение, как писали тогда вы необходимо переместить # главного меню div в верхнюю часть (то есть: top: 0;), но также позаботиться о #foo div, когда страница сначала отображается. Это правда? Также я рекомендую использовать медиа-запросы. –

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

Вы можете добавить эти строки в CSS для тела:

margin: 0; 
padding: 0;

источник

2015-03-27 17:49:56 user2182349

Вам нужно применять только липкую СЧ, когда свиток достигает эту точку с чем-то вроде:

$(window).scroll(function() { 
    var scroll = $(this).scrollTop(); 
    var topDist = $('#main-menu').offset().top; 

    if (scroll > topDist) { 
     $('#main-menu').addClass('sticky-menu'); 
    } else { 
     $('#main-menu').removeClass('sticky-menu'); 
    } 
});

источник

2015-03-27 18:02:05

Фикс нав к началу только на рабочем столе

ответ

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