Изменить jQuery так, чтобы он запускал только определенный CSS в зависимости от ширины экрана.

Question

Изменить jQuery так, чтобы он запускал только определенный CSS в зависимости от ширины экрана.

0

В настоящее время я использую jQuery ниже, чтобы заголовок был липким и фиксированным, когда пользователь прокручивает страницу вниз, но мне нужно только #logo display: none; на ширине экрана меньше 768px (я уже использую множество стилей и медиа-запросов).

jQuery(window).scroll(function(){
        if( jQuery(window).scrollTop() > stickyHeaderTop ) {
                jQuery('.stickyheader').css({position: 'fixed', top: '0px'});
                jQuery('.stickyalias').css('display', 'block');
                jQuery('.stickyheader #logo').css('display', 'none');
        } else {
                jQuery('.stickyheader').css({position: 'static', top: '0px'});
                jQuery('.stickyalias').css('display', 'none');
                jQuery('.stickyheader #logo').css('display', 'block');
        }
});

Как я могу запускать только jQuery('.stickyheader #logo').css('display', 'none'); для этого сценария, пожалуйста? Заранее спасибо.

zigojacko 06 янв. 2014, в 17:13

Источник

Теги:

javascript

jquery

css

scroll

1 ответ

Ещё вопросы

Niet the Dark Absol · Accepted Answer · 2014-01-06T14-11-00.000Z

Вам было бы лучше добавить/удалить класс и в вашем файле CSS:

@media all and (max-width:768px) {
    .hide_if_under_768px {display:none}
}

В общем, это плохая идея поместить необработанный CSS в ваш JavaScript (по той же причине, что в целом плохо использовать атрибуты style="css here"),

Да, это сработало, я просто добавил .addClass('hide') в оператор if и .removeClass('hide') в оператор else в моем опубликованном коде выше, а затем установил .hide для display:none в CSS. Благодарю.