Требуется сделать "липкий блок" - блок, прикрепленный к верху страницы. Прокрутка на него не влияет, он всегда по верху. Липким он должен становиться, если страница прокрученна вниз на 107 и более пикселей :).
Мой подход таков:
-
Создать css-класс, реализующий липкость: фиксированное позиционирование и т.д.
-
Создать JS-ку (JQuery используется), определяющую уровень прокрученности страницы. Если больше 107px - добавлять класс. Меньше - снимать.
С первым проблем нету, все ок, а вот в JS/JQuery слаб. Набросал базовую версию.
Покритикуйте, пожалуйста :)
<script>
$(window).scroll(function(){
var scrolled = $(this).scrollTop();
if( scrolled >= 107 ) {
$('#stiky-block').addClass('sticked');
}
if( scrolled <= 107 ) {
$('#stiky-block').removeClass('sticked');
}
});
</script>
Получается, что этот код отрабатывает каждый разкогда пользователь прокручивает страницу. Следовательно, каждый раз по всей странице ищется объект #sticky-block. Может есть смысл сохранить его в отдельную переменную перед началом работы скрипта?
Получается, что каждый раз при прокрутке, например от 500px до 600px и от 600px до 700px #sticky-block`у прилепляется класс. По идее алгоритм должен работать только один раз, если перешли границу в 107px и наоборот. Может сюда стоит добавить флаги?
Чуть более логичный вариант:
<script>
$(window).scroll(function(){
var scrolled = $(this).scrollTop();
if( scrolled >= 107 && ! $('#sticky-block').hasClass('sticked') ) {
$('#sticky-block').addClass('sticked');
}
if( scrolled <= 107 && $('#sticky-block').hasClass('sticked')) {
$('#sticky-block').removeClass('sticked');
}
});
</script>