Как заменить один элемент другим при скролле?

Question

[VladimirKrasnov]

Есть 2 diva

<div id="elem1">Пики точеные</div>
<div id="elem2">Не точеные</div>

Div с elem1 виден изначально, в то время как elem2 скрыт. Когда юзер скроллит страницу, elem1 уползает вверх и пропадает, в замен его вылезает elem2, который fixed-top.

Как такое можно реализовать? По сути хочу при скролле заменить большую шапку странницы, более компактной

Comments

[Ankhena]

С большой вероятностью не нужно менять блоки и достаточно манипуляций с одним.

Отслеживаете скролл.
Когда будет пора меняете/добавляете блоку класс.
При наличии этого класса через css убираете лишние внутренние блоки и меняете стили.

Answer 1

[Виталий Першин]

Answer 2

[Chamalion]

JQuerry функция

$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 55) {
#elem1 - display: none;
#elem2 - display: block;
}
else {
Наоборот
}
});
});

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

Comments

[Алексей Рудьковский]

Чтобы на jquery задать стили элементу нужно использовать метод css:
$('#elem1').css('display', 'none')
Или назначить класс и уже отдельно в css прописать стили