Изменения при прокрутке вниз

Я пробуя достичь того же замирания заголовка/проявку эффекта, как этот сайт: http://www.shopstyle.com/Изменения при прокрутке вниз

Если вы зайдете на сайт и прокрутите вниз, вы увидите, что начальный заголовок прозрачен, но при прокрутке вниз по определенному числу пикселей CSS переключается на сплошной фон. Это делается через jquery/js или возможно через CSS3?

Спасибо

источник

2013-11-12 user2028856

Это невозможно с помощью только CSS, так как CSS не может выбрать вершину прокрутки. Это очень легко сделать с помощью javascript.

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

источник

2013-11-12 20:36:50

Спасибо за ответ, я m, предполагая, что '> 100' означает более 100 пикселей вправо? – user2028856

@ пользователь2028856 да; вы можете изменить это значение на то, что лучше всего подходит для вас –

+1 для хорошего примера – Jamie

Использование jQuery Waypoints плагин, чтобы вызвать изменение класса на header в определенном положении прокрутки/смещения. Существует даже расширение Waypoints специально для этой цели (липкие элементы) here. Вы можете анимировать его либо с помощью переходов/анимаций CSS3, либо с помощью анимации изменения класса jQuery.

С сайта я сделал недавно, что имеет липкий заголовок, который также оживляет похож на сайте вы связаны, это все JS, которые я использовал для этой функции:

$('.header-wrap').waypoint('sticky', { 
    stuckClass: 'stuck', 
    offset: -1 
});

offset: -1 означает изменение срабатывает один раз верхняя часть элемента .header-wrap попадает в окно -1px относительно окна (так что, как только окно прокручивается НА ВСЕ - если вы положили -200, оно не срабатывало, пока окно не прокручивалось на 200 пикселей).

Класс stuck изменения обрабатывает все прозрачности, анимации, положение и т.д.

источник

2013-11-12 20:37:20 Ennui

Спасибо за ответ, является ли waypoint родной для jquery или это внешний плагин, который мне нужно импортировать? Кроме того, я понимаю, что класс header-wrap является верхним заголовком, а класс «застрял» обрабатывает прозрачность, но что делает класс «липким»? – user2028856

@ user2028856 Это внешний плагин - вам нужно будет включить и jquery.waypoints.min.js' и 'waypoints-sticky.min.js' (поскольку липкая заголовочная вещь на самом деле является« дополнительным плагином »путевых точек, вы можете сделать то же самое, просто используя точки маршрута). – Ennui

Аргумент «липкий» просто указывает путевым точкам использовать функциональность «липких элементов» (например, http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/). Класс 'stuck' имеет' position: fixed; top: 0; left: 0; 'и т. д., а также переходы CSS3 для различных анимированных свойств (непрозрачность и высота в моем случае). – Ennui

Комбинация Javascript и CSS3 должен сделать трюк. По сути то, что вам нужно сделать, это слушать $ (окно) .scroll событие и при определенном у-офсет, добавить класс (например, заполнить) на ваш заголовок:

.header { transition: all 1s; } 
.header.fill { background-color:rgba(0,0,0,.25); }

источник

2013-11-12 20:38:06 meavo

Изменения при прокрутке вниз

ответ

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