Фиксация меню при прокрутке страницы | 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. avatar_https://kylaksizov.ru/uploads/fotos/foto_16.jpg
    Wild 1 марта 2016 12:15
    • +1
    Ответить
    Хотелось бы ДЕМО.
    Я понимаю, что можно самому вручную все создать и проверить, но человек ленив!
    Мне проще глянуть пару-тройку других реализаций и выбрать более приглянувшееся.
    1. avatar_http://kylaksizov.ru/uploads/fotos/foto_1.jpg
      Kylaksizov 1 марта 2016 12:16
      • 0
      Ответить
      Вообще-то демо перед Вами, разве не видно что шапка меняет положение при скроллинге? :D
      1. avatar_https://kylaksizov.ru/uploads/fotos/foto_16.jpg
        Wild 1 марта 2016 12:47
        • 0
        Ответить
        Она настолько прозрачна, что я даже ее не заметил, пока вы не подсказали и я не навел на нее мышкой!
        Ж:-P
        1. avatar_http://kylaksizov.ru/uploads/fotos/foto_1.jpg
          Kylaksizov 1 марта 2016 12:48
          • 0
          Ответить
          Да, есть такое. Всё никак нет времени доделать сайт нормально.
          1. avatar_https://kylaksizov.ru/uploads/fotos/foto_16.jpg
            Wild 1 марта 2016 12:49
            • 0
            Ответить
            Понял! :))
            В любом случае спасибо!
    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent

В корзине: 0 шт. 0 руб.
Отключите расширение AdBlock на нашем сайте!

Собеседники

Переписка

Нименование Количество Цена / 1 шт.
Всего: 0 руб.