Плавающая шапка(при скролле) мобильной версии сайта на jQuery

Автор: Роман Чернышов    Опубликовано: 1 ноября 2024

В рамках портфолио делюсь небольшой заметкой и кодом скрипта, как реализовать плавающую(фиксированную) шапка при скролле, мобильной версии сайта на JavaScript. Возможно кому-то из данное решение пригодиться, а кто-то пожелает заказать аналогичную работу. Ко мне обратился клиент владелец сети клининговой службы, работающей в разных в городах России, нашедший меня через мой блог, прочитав одну из моих статей , и предложивший мне сотрудничество. Хоть задача не сложная, и больших бюджетов не требует, клиент ознакомился с разделами моего блога гарантии, об авторе и конечно отзывами. После чего мы приступили к работе.

Поставленные задачи

В рамках данного проекта, были поставлены и реализованы следующие задачи:

Реализовать плавающую шапку на страницах в мобильной версии сайта.

Стек технологий

Языки программирования и фреймворки:

• JavaScript;
• jQuery;
• HTML 5;
• CSS 3;

Системы управления контентом (CMS):

• WordPress (Но решение универсально и для любой другой CMS).

Пример реализации

Код HTML:

<section class="header">
  <ul>
 	<li>Пункт меню 1</li>
 	<li>Пункт меню 2</li>
 	<li>Пункт меню 3</li>
 	<li>Пункт меню 4</li>
  </ul
</section>

Код CSS:

@media (max-width: 1024px) { /*если ширина страницы меньше 1024px */
    .header.sticky {
        position: fixed;
        top: 0;
        width: 100%;
        background: #ffffff;
    }
}

Код JavaScript/jQuery:

jQuery(document).ready(function() {
 
	$(window).on("scroll", function() {
 
	    if($(window).scrollTop() >= 50) {
 
		$("section.header").addClass("sticky");
 
	    } else {
		$("section.header").removeClass("sticky");
 	    }
 
	});
});

CSS, HTML, JavaScript / jQuery, jQuery     jquert, плавающая шапка