Фиксация меню при прокрутке страницы | Jquery

фиксация шапки при прокрутке на jquery
 
Я покажу очень простой пример, как зафиксировать верхнее меню или шапку на сайте, когда пользователь прокручивает страницу вниз. А так же мы снимем фиксацию, когда пользователь прокрутит страницу к началу.
 
Как Вы могли заметить, у меня на сайте точно так и сделано (на быструю руку).
 
Я сам не люблю читать много, а сразу хочу получить нужный код и уйти с сайта. Но я пишу именно урок, а не просто даю Вам готовый скрипт. Профи вряд ли будут читать статью, они сразу найдут нужный им код или вообще не будут искать эту информацию)
 
Извиняюсь, отвлёкся.
 

Узнаем значение скроллинга - функция

	function toggleHeader(){
	    var scroll_status = $(document).scrollTop();
	    if(scroll_status > 0)
	        $("#header").addClass("header_min");
	    else
	        $("#header").removeClass("header_min");
	}
	
Что бы избежать дублирование одного и того же кода, мы написали функцию. Наша функция определяет значение прокрутки (в пикселях): $(document).scrollTop(); и заносит его в переменную scroll_status. После этого мы проверяем, значение скроллинга больше нуля или нет. Если скроллинг больше нуля, то мы добавляем новый класс к нашему меню или шапке: $("#header").addClass("header_min"); а иначе наоборот удаляем класс, который был добавлен.
 
После этого мы вызываем эту функцию:
toggleHeader();
Это означает, что после загрузки страницы сразу сработает эта функция, тем самым проверив положение страницы в начале или она уже опущена и т.д.
 
Теперь нам нужно написать простейшее событие, что бы при скроллинге снова срабатывала фугкция и проверялось положение страницы:
	$(document).scroll(function(){
	    toggleHeader();
	})
	
Событие scrollреагирует на прокрутку страницы. То есть в момент скролла у нас всегда будет инициализироваться функция и снова поверять выше сказанное.
 
Напоследок нам осталось прописать новые стили для нашего меню или шапки, а так же для всех внутренних элементов. Надеюсь, что Вы владеете html и css. В любом случае пишите в комментариях, у кого останутся вопросы.
 
 
Кому интересно, можете попробовать мой личный плагин Buildmenu.js
А так же плагин Sticky, слегка схожий по теме с уроком, но более мощный.
 
Автор: Kylaksizov

Комментарии ( 5 )

  1. +1

    Wild

    Хотелось бы ДЕМО.
    Я понимаю, что можно самому вручную все создать и проверить, но человек ленив!
    Мне проще глянуть пару-тройку других реализаций и выбрать более приглянувшееся.
    1 марта 2016 12:15 Ответить
    1. 0

      Kylaksizov

      Вообще-то демо перед Вами, разве не видно что шапка меняет положение при скроллинге? :D
      1 марта 2016 12:16 Ответить
      1. 0

        Wild

        Она настолько прозрачна, что я даже ее не заметил, пока вы не подсказали и я не навел на нее мышкой!
        Ж:-P
        1 марта 2016 12:47 Ответить
        1. 0

          Kylaksizov

          Да, есть такое. Всё никак нет времени доделать сайт нормально.
          1 марта 2016 12:48 Ответить
          1. 0

            Wild

            Понял! :))
            В любом случае спасибо!
            1 марта 2016 12:49 Ответить


Отправить

В корзине: 0 шт.

на сумму: 0

Всего: 0

Оформить заказ Очистить корзину