Sticky Header for Desktop Width Only

Я не уверен, что это называется липким заголовком, но это может быть простой вопрос для вас, ребята! У меня есть липкий заголовок .. JSFIDDLE здесьSticky Header for Desktop Width Only

JS код:

jQuery(function($) { 
$(window).on("scroll", function() { 
if ($(this).scrollTop() > 100) { 
    $("#header").css({position: 'fixed'}); 
} 
else { 
    $("#header").css({position: 'inherit'}); 
} 
}) 
});

CSS:

#header { background: #000; color: #fff; padding: 20px; margin: 0; } 
#test { height: 2000px; }

Главная Вопрос: Я хочу, чтобы этот скрипт для запуска на экране 780 выше всего. Я не хочу этого в своих планшетах и мобильных версиях. Справка

Дополнительно: Можете ли вы предложить/импровизировать мой код, выполнив jsfiddle? Что-то вроде добавления прохладного эффекта, переходов и т. Д.

Заранее спасибо!

EDIT ** Я не уверен, если это будет будет другой вопрос ..

Я обновил свои коды и заменить этот

if ($(this).scrollTop() > 100) {

if ($(this).scrollTop() > 100 && $(this).width() > 780) {

В некотором смысле, он работает .. но он не возвращает свойства css для небольших версий. Чтобы это объяснить, вот UPDATED jsfiddle.

Для 780 Выше при прокрутке заголовок становится красным, а при прокрутке вверх становится черным снова (так же, как я хотел)
Если вы повторно ваш размер окна ниже 780 заголовка должен быть серым. и если прокручивается вниз и вверх снова (позиция должна наследоваться не исправлена). цвет по-прежнему она должна быть серой

им мой jsfiddle случай, он становится черным ..

источник

2013-11-14 Jeremi Liwanag

Посмотрите $ (окно) .width(); и включить это в свой код. Дайте ему шанс, и если вы все еще застряли, вернитесь с кодом :) –

Привет всем, пожалуйста, вопрос снова .. Я его обновил. –

Я бы просто добавил класс CSS и использовал медиа-запрос в этом классе, чтобы определить, следует ли его исправлять. См. Fiddle.

jQuery(function($) { 
    $(window).on("scroll", function() { 
     if ($(this).scrollTop() > 100) { 
      $("#header").addClass("stickyHeader"); 
     } 
     else { 
      $("#header").removeClass("stickyHeader"); 
     } 
    }) 
});

CSS:

@media (min-width: 780px) { 
    .stickyHeader { position: fixed; } 
}

источник

2013-11-14 04:02:25

Ничего себе, это еще один способ сделать это :), но это создало дополнительные проблемы .. пожалуйста, просмотрите мой вопрос еще раз. –

, но ваш jsfiddle не работает. –

Какие дополнительные проблемы? Вы можете просто добавить свои правила в класс stickyHeader. См. Http://jsfiddle.net/9Lw2G/4/ –

Вы можете получить высоту окна с JQuery

if($(window).width() >= 780){ 
    alert("bigger") 
}

источник

2013-11-14 03:16:54 Vaughan

Во-первых, вам нужно выполнить этот метод, т. Е. Его; $ (window) .height() И, во-вторых, разве он не хотел бы ширины вместо этого? –

да возможно :) – Vaughan

if ($ (this) .scrollTop()> 187 && $ (this) .width()> 780) {} i Добавлено это, оно сработало, но оно не возвращает элементы в исходное состояние, когда прокручивается назад .. то есть для 320, 480 и 780 viewport –

CSS медиа-запросы Безразлично 't помочь вам ?, вы можете сделать что-то вроде:

#header { 
    position: fixed; 
    background: #000; 
    color: #fff; 
    padding: 20px; 
    margin: 0; 
    transition: left 0.5s; 
} 

#test { 
    height: 2000px; 
} 

@media all and (max-width: 780px){ 
    #header { 
     position:inherit; 
    } 
}

Вы можете см. его на вас gist HERE

источник

2013-11-14 03:53:53 rodacato

Sticky Header for Desktop Width Only

ответ

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