Матвей Земсков

Заметки веб-мастера

Суббота, 18 мая 2013 10:23

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

Оцените материал
(188 голосов)

В последнее время я замечаю, что на множестве сайтов используется так называемое фиксированное «плавающее» меню. Обычно это горизонтальное меню. Вообще, зафиксировать можно не любое меню: и горизонтальное, и вертикальное. Как это работает – при загрузке страницы меню находится в определенном месте страницы (например, под «шапкой»), а при прокрутке страницы оно фиксируется вверху окна браузера и не прокручивается, как остальное содержимое. Если же посетитель прокручивает страницу вверх и достигает начала страницы, меню возвращается на свое место. Таким образом, посетитель, находясь в любом месте страницы, может его использовать и переходить на другие страницы сайта. Это очень удобно и соответствует принципам юзабилити.

Сейчас я расскажу, как можно сделать фиксированное меню средствами jQuery. Как оказалось, это несложно - код состоит всего из нескольких строчек.

Вариант №1

В первом варианте рассмотрим случай, когда «шапка» сайта имеет небольшую высоту (например, 150px) меню расположено под ней, при прокрутке оно фиксируется вверху страницы. В этом варианте страницы все довольно просто и обычно.

Для начала нужно создать страницу.

Страница с верхним фиксированным меню
Примерная схема блоков страницы (вариант №1)

При помощи CSS устанавливаем высоту «шапки» и создаем правила для блока с меню.

CSS

	/*шапка*/
	header{
	   height:150px;
	}
	/*фиксированное плавающее меню*/
	#top_nav{
	   top: 150px; /*высота шапки в пикселях*/
	   position: fixed;
	   z-index: 1000;
	}

Теперь переходим к написанию скрипта на jQuery, который будет фиксировать меню вверху страницы при прокрутке.

JavaScript

<script>
var h_hght = 150; // высота шапки
var h_mrg = 0;	  // отступ когда шапка уже не видна
				
$(function(){

	var elem = $('#top_nav');
	var top = $(this).scrollTop();
	
	if(top > h_hght){
		elem.css('top', h_mrg);
	}			
	
	$(window).scroll(function(){
		top = $(this).scrollTop();
		
		if (top+h_mrg < h_hght) {
			elem.css('top', (h_hght-top));
		} else {
			elem.css('top', h_mrg);
		}
	});

});
</script>

В скрипте создаем 2 переменные в которые сохраняем значения высоты шапки и отступа блока с меню сверху. Отступ может отсутствовать (как в данном случае). Затем пишем обработчик на событие onScroll объекта window. В нем с помощью метода scrollTop() вычисляем расстояние от верха страницы до текущей позиции скроллера прокрутки. На основании расчета позиционируем блок с меню.

Вариант №2 (Добавлено 18.02.2015)

Второй вариант фиксированного меню более сложный. В нем «шапка» занимает весь экран, меню находится внизу страницы, при прокрутке содержимого к концу страницы, оно «поднимается», до тех пор, пока не достигнет верха, затем меню фиксируется.

При прокрутке страницы к началу, меню также «движется» вместе с содержимым, а когда достигает низа, оно фиксируется.

Страница с нижним фиксированным меню
Примерная схема блоков страницы (вариант №2)

Нам потребуется следующий CSS-код.

CSS

	html, body{height:100%;}
	
	/*шапка*/
	.firstScreen{height:100%; background: fixed url(path/to/image) no-repeat 50% 0;}
	
	/*фиксированное плавающее меню*/
	#top_nav{
	   bottom:0;
	   position: fixed;
	   z-index: 1000;
	   width:100%;
	   height:100px;
	}

Скрипт нижнего фиксированного меню на jQuery будет выглядеть немного иначе.

JavaScript

	 <script>
	   $(function(){
			// высота "шапки", px
			var h_hght = $('.firstScreen').outerHeight();
			// высота блока с меню, px
			var h_nav = $('#top_nav').outerHeight();
			var top;
			$(window).scroll(function(){
				// отступ сверху
				top = $(this).scrollTop();
				if((h_hght-top) <= h_nav){
					$('#top_nav').css('top','0');
				}
				else if(top < h_hght && top > 0){
					$('#top_nav').css({'bottom' : top, 'top':''});
				}
				else if(top < h_nav){
					$('#top_nav').css({'top':'','bottom':'0'});
				}
			});
		});		
	 </script>

В начале создаем 3 переменных. В h_hght сохраняем значение высоты «шапки», которая занимает весь экран по высоте, в переменную h_nav помещаем значение высоты блока с навигацией. В переменной top будет хранится значение отступа прокрутки сверху, которое будет вычисляться при каждом скролле.

Далее в скрипте в зависимости от значения переменной top, блоку с навигацией устанавливается значение CSS-правил top или bottom.

Таким образом достигается поведение блока с меню, описанное выше.

Ну вот, собственно, и всё.

Я создал 2 простые странички для демонстрации работы обоих вариантов фиксированного меню. При желании вы сможете ознакомиться с ними:

Прочитано 136352 раз
Добавить комментарий

Комментарии   

 
0 # Михаил 15.09.2013 16:06
А как сделать чтобы блок останавливался на определённой высоте от края?
Ответить | Ответить с цитатой | Цитировать
 
 
+3 # Михаил 15.09.2013 16:09
:lol: простите, нашел!! var h_mrg = 0;
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Александр 25.12.2013 01:10
Отличный скрипт, спасибо!
Только в ie работать без этого файла не будет?
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Матвей 25.12.2013 17:58
Если вы имеете ввиду файл html5.js, то да, без него не будет работать в IE ниже 9 версии
Ответить | Ответить с цитатой | Цитировать
 
 
+4 # Дмитрий 15.02.2014 14:28
Автору сего спасибо большое)
Ответить | Ответить с цитатой | Цитировать
 
 
+3 # Матвей 26.02.2014 11:20
Пожалуйста, Дмитрий! Рад, что информация полезна для вас!
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # дизайн -ер 05.03.2014 14:09
а можно как-то без статичного указания высоты с присвоением координат через offset ? Т.к. в проекте хидер на разных пагах высоту меняет.
Ответить | Ответить с цитатой | Цитировать
 
 
+2 # Матвей 09.03.2014 10:57
Да, можно. Первые 2 строки перенести внутрь $(function(){})
и заменить
var h_hght = 150; // высота шапки
на
var h_hght = $('header').height(); // высота шапки
Ответить | Ответить с цитатой | Цитировать
 
 
+2 # Илья 13.03.2014 23:36
Очень понравился скрипт спасибо!
А как можно его доработать так чтоб доходя до конца страницы фиксированное меню пропадало т.к. в footer верхнее меню дублируется?
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Матвей 17.03.2014 18:08
Пожалуйста, Илья! А сделать так как вы хотите можно. Вот пример: http://mattweb.ru/demo/fixed_menu_hide/
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Игорёк 03.05.2014 16:01
Ну наконец-то хоть один толковый человек грамотно объяснил и все по полочкам разложил.

Спасибо! :-)
Ответить | Ответить с цитатой | Цитировать
 
 
+2 # Матвей 04.05.2014 10:50
Пожалуйста :)!
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Владислав 07.05.2014 11:39
Спасибо огромное! Очень классный урок) Давно искал такое меню) 5+ 8)
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Владимир 06.06.2014 00:01
Давно искал маленький скрипт с такими возможностями. Спасибо.
Только подскажите, как прописать в скрипте высоту в em, а не в пикселях. Сейчас, если вместо 150 поставить, например 8em то ничего не работает.
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Матвей 11.06.2014 10:27
Можно попробовать перевести значение em в px. По-умолчанию, 1em = 16px.
В первой строке
var h_hght = 8*16; // высота шапки
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Владимир 11.06.2014 21:55
Перевести em в px, конечно можно. Но пиксели не настолько гибкие. Да и вся разметка у меня в em'ах, поэтому появляются расхождения в размерах, т. к. сколько не переводи, но значения точными не будут (да еще и от браузера зависит).
А что, как-нибудь задать в скрипте, чтобы значения воспринимались в em разве нельзя?
Ответить | Ответить с цитатой | Цитировать
 
 
+2 # Матвей 15.06.2014 12:15
Да, Владимир, согласен, что перевод не совсем элегантное и универсальное решение. Но насколько мне известно, по-другому не получится. JavaScript и jQuery вычисляет все значения в px
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Владимир 15.06.2014 13:29
Понятно. Жаль конечно, но ничего не поделаешь.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Игорь 17.06.2014 00:55
спасибо, пригодилось
понятно даже мне :-)
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Матвей 19.06.2014 10:34
Пожалуйста!
Ответить | Ответить с цитатой | Цитировать
 
 
0 # vladchv 17.07.2014 14:30
а как сделать, чтобы при прокрутке меню становилось уже?
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Матвей 25.07.2014 10:26
Можно при прокрутке присваивать блоку с меню какой-нибудь класс (например, narrow) и прописать CSS-правила с этим классом и необходимой высотой, отступами и тп. В момент когда страница прокручивается в начало класс нужно отключать. В этом случае добавленные стили работать не будут.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Александр 11.09.2014 16:46
Цитирую Матвей:
Можно при прокрутке присваивать блоку с меню какой-нибудь класс (например, narrow) и прописать CSS-правила с этим классом и необходимой высотой, отступами и тп. В момент когда страница прокручивается в начало класс нужно отключать. В этом случае добавленные стили работать не будут.

А поподробнее можно? Куда нужно прописать класс narrow в скрипте, чтобы потом его оформить стилями?
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Матвей 12.09.2014 14:01
Можно так попробовать:

if (top+h_mrg < h_hght) {
elem.css('top', (h_hght-top));
elem.addClass('narrow');
} else {
elem.css('top', h_mrg);
elem.removeClass('narrow')
}
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Ризон 20.07.2014 18:54
Здравствуйте! А не подскажите, как сделать чтобы меню меняло цвет при фиксации сверху сайта. Чё то ни как не могу разобраться. Буду очень признателен Вам!
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Матвей 24.07.2014 10:54
Например, так:

if (top+h_mrg < h_hght) {
elem.css({'top': (h_hght-top), 'background-color' : '#f0f0f0'});
} else {
elem.css({'top': h_mrg, 'background-color' : '#00ff00'});
}

можно менять фон.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Ризон 26.10.2014 13:58
Большое спасибо!
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Сергей 26.01.2015 14:38
Здравствуйте, вот пример фиксированного меню, которое меняет цвет на цвет фона при прокрутке http://bolshoi-medved.ru/, но в опере и хроме чего то цвет меняется раньше попадания на page1, page2, page3. буду премного благодарен за совет, как исправить?
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Матвей 05.02.2015 10:33
Сергей, попробуйте в коде поменять следующую строку: map[n]=this.offsetTop на map[n]=$(this).offset().top
Возможно это поможет. Дело в том что в разных случаях (прокрутка и переход по ссылке) координаты блоков рассчитываются по-разному. Поэтому и цвет в меню меняется раньше.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Сергей 09.02.2015 18:16
Спасибо за участие, решил вопрос только прописыванием размеров всех изображений в html, сценарий первоначальной загрузки фоток тоже не помог
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Юрий 26.07.2014 19:21
Матвей, у меня почему-то этот скрипт не работает. Пробовал подключать три разные версии джейквери, в том числе последнюю - jquery-1.11.0.min. Какую версию вы подключаете?
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Матвей 27.07.2014 07:18
Я подключаю jquery-1.9.1.min.js
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Максми 27.08.2014 17:00
а как быть если высота шапки резиновая?
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Матвей 03.09.2014 20:09
Можно рассчитать высоту шапки с помощью jQuery-функции innerHeight()
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Klava 13.10.2014 13:54
К сожалению, данный способ некорректно отображается при масштабировании на планшете, меню съезжает не туда (
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Матвей 15.10.2014 09:44
При просмотре на планшете под Android во встроенном браузере и в Firefox на демо-страничке проблем не обнаружил. Думаю, что если проблема возникает на мобильных устройствах, то нужно задуматься о создании адаптивного меню.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Анна 06.02.2015 12:38
Спасибо Вам огромное!
Вы меня очень выручили, а то совсем "нулевая" в JavaScript.
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Матвей 09.02.2015 09:53
Пожалуйста
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Михаил 09.02.2015 12:34
Добрый день!
Подскажите, пожалуйста, а что делать, если расположение меню до прокрутки bottom: 0px, при этом высота основного фона height: 100%, т.е. высота фона определяется от размера экрана пользователя?
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Матвей 17.02.2015 17:49
Ознакомьтесь с кодом примера: http://mattweb.ru/demo/fixed_menu_bott/index.html, возможно это как раз ваш случай.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Саня 12.03.2015 03:03
Спасибо тебе друг, еле понял как это сделать.
Респект тебе и уважение!
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Матвей 13.03.2015 09:43
Пожалуйста! :-)
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Николай 25.03.2015 14:32
Добрый день! Спасибо за скрипт все работает. Есть вопрос: Можно сделать так чтоб меню при прокрутке до определенной высоты фиксировалось, а после останавливалось? Т.е прокручиваем 1000 px оно зафиксировано, после 1000 px останавливается и дальше страница прокручивается без него.
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Матвей 13.04.2015 16:28
Пожалуйста, Николай! Немного не понял, какой результат вы хотите получить? Чтобы меню исчезало после прокрутки более 1000px?
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Роман 27.03.2015 18:47
:oops: Что то у меня не работает. Я правильно понял что стиль в .css а скрипт в .js вставляю?
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Матвей 13.04.2015 16:32
Да, Роман, вы все правильно поняли. Если не получается, ознакомьтесь, пожалуйста, с примерами, ссылки на которые указаны в конце статьи
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Антон 28.04.2015 20:53
Спасибо!!! искал и нашел то что искал!!! :-)
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Alex 27.05.2015 19:22
А куда вставлять сам скрипт???
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 29.05.2015 13:08
Alex, можно в код страницы в раздел HEAD, а можно в отдельный файл и подключить этот файл к странице опять же в разделе HEAD
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Константин 13.07.2015 15:43
Здравствуйте Матвей! Подскажите, как прописать этот код на гугл-сайт? Копирую его в поле HTML, и ничего не происходит
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 15.07.2015 12:05
Константин, к сожалению на Google-сайт не получится разместить такое меню: во-первых, там нет возможности редактировать код темы сайта, во-вторых, при добавлении JS непосредственно в код страницы, теги script удаляются.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Наталья 14.07.2015 20:58
Ваша статья просто супер. Пол интернета облазила, но ничего не нашла, кроме спама. Спасибо.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 15.07.2015 12:03
Спасибо, рад, что статья вам помогла!
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Павел 13.10.2015 15:07
спасибо! действительно удобный и простой скрипт, а главное легко внедряемый в макет в котором уже +100500 сриптов напихано ;-)
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Кирилл 13.11.2015 18:24
:-| как добавить сие чудо в webbuilder 9 ?
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 19.11.2015 13:45
Кирилл, я к сожалению никогда не сталкивался с webbuilder, поэтому точно сказать не могу. Вообще, если действовать по аналогии с другими CMS - этот скрипт размещается в папке шаблона сайта и подключается в основном шаблоне сайта.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Илья 19.11.2015 14:05
Добавить можно, я добавлял, но не через интерфейс Webbuelder.
Но всё равно можно добавить, в Webbuelder добавьте элемент который прикрепляет файлы, туда добавьте скрипт (если его нет) Затем открываете в Webbuelder редактировать HTML страницы и туда (если не ошибаюсь в тело body добавляете код, так же в head залинкуйте путь скрипту.

Суть в том, что вы вручную добавляете всё что вам нужно, но в отличии редактирования в текстовом файле после компиляции, вы это приписываете в Webbuelder, таким образом не нужно будет каждый раз редактировать файл после компиляции )
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Виктор 19.11.2015 11:10
Благодарность:Большое спасибо! Реально полезная информация для начинающих веб-разработчиков, которые ещё не успели сами начать учить язык JavaScript, но уже хотят добиться результатов и тем самым вдохновиться на его изучение.
Замечание: для таких не образованных как я, стоит в конце или в начале статьи сделать жирным текстом: не забудьте подключить библиотеки JQuery. Просто для новичка "средствами jquery" было не совсем понятно, что имелось ввиду. Я думал что это какие-то встроенные модули, типа как в html5, не думал, что их нужно подключать отдельно.
Вопрос: я воспользовался первым способом, но моё меню вертикальное и по достижении подвала налазит на него и перекрывает. На разных страницах подвал, естественно, будет не на одном и том же расстоянии от верха. Задача в том, чтобы по достижении подвала меню снова переставало быть фиксированным и прокручивалось вместе с содержимым. Буду весьма признателен, если поможете с решением. Ещё раз спасибо.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # ЖЕНЯ 11.12.2015 23:32
у меня сайт на wordpress. сделали меню (не в вордпрессе), хочу чтоб при прокрутке фиксировалось к потолку, ваш css "держит" мое меню фиксированно, т.е при при прокрутке стоит мертво на месте. поможете разобраться?
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 22.12.2015 17:06
Женя, чтобы все работало правильно необходимо подключить JS-код. Судя по вашему комментарию, у вас JS-код некорректно работает. Почитайте статью повнимательней, проверьте подключен ли JS-код к страницам сайта.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Guest 15.01.2016 15:14
Спасибо!
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Амир 27.01.2016 17:24
Спасибо. Все работает на ура!!!! :lol: :lol: :lol: :lol:
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Tony C. 19.02.2016 14:37
Очень полезно, спасибо!
А как сделать, чтоб при прокрутке наше меню останавливалось на определенном расстоянии от верха и прокрутка продолжалась уже без него?
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 22.02.2016 09:47
Не совсем понял, что вы хотите сделать. Если хотите чтобы при прокрутке меню находилось не в самом верху экрана, а с отступом, то измените значение переменной h_mrg в скрипте.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Tony C. 22.02.2016 10:00
Не совсем так. Возьмем в пример длинный лендинг из 5 секций. Мы начинаем скроллить и блок следует за нами, доходим например до половины второй секции, блок остается остается там и перестает быть зафиксированным, а мы можем продолжать прокручивать страницу но уже без этого блока.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 22.02.2016 10:40
Если вы хотите, чтобы блок скрывался в определенной позиции, то в начале скрипта создайте переменную:
var hide_pos = 800; // скролл сверху, где блок должен скрываться
перед проверкой условия в скрипте добавьте еще одну проверку:
if(top > hide_pos){
elem.css('position', 'static');
}
else{
elem.css('position', 'fixed');
}

вместо 800 укажите свое значение
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Михаил 26.02.2016 18:21
Спасибо ;-)
Минимализм и простота :-*
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Антон 10.03.2016 23:04
Уважаемый Матвей. Я заметил небольшое несовершенство в таких скриптовых меню: если был скроллинг, то при обновлении страницы, меню оказывается в "малопредсказумом" положении на странице, так что необходим скроллинг, чтобы оно вернулось на своё место. Подскажите пожалуйста, как можно убрать этот баг :-)
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Матвей 12.03.2016 10:17
Антон, я исправил этот баг. Посмотрите демо-страничку
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Антон 14.03.2016 07:58
Благодарю! У меня по невежеству было более радикальное решение:
$(document).ready(function(){
setTimeout(function(){
window.scrollTo(0, 0);
}, 1);
}); :lol:

Ваш вариант дополнил бы так:
if (top+h_mrg < h_hght) {
elem.css('top', (h_hght-top));
} else {
elem.css('top', h_mrg);
}
перед $(window).scroll(function..
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Alex 03.04.2016 20:40
Интересное решение. Скажите, а как можно доработать скрипт, чтобы в момент прилипания элементу #top_nav добавлялся дополнительный класс?
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 11.04.2016 09:44
if (top+h_mrg < h_hght) {
elem.css('top', (h_hght-top)).addClass('my_class');
} else {
elem.css('top', h_mrg).removeClass('my_class');
}
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Максим 18.04.2016 13:20
Как сделать, чтобы при скролле до определенного элемента, пропадал элемент top_nav?

Дело в том, что внизу сайта есть форма обратной связи и, если меню наезжает на нее, выглядит плохо.

Заранее спасибо за код!
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 19.04.2016 13:57
Максим, я уже писал комментарий в ответ на аналогичный вопрос. Ознакомьтесь с ним, пожалуйста: http://mattweb.ru/moj-blog/javascript-jquery/item/63-fiksiruem-menu-pri-prokrutke-stranitsy#comment-358
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Максим 19.04.2016 17:53
Цитирую Матвей:
Максим, я уже писал комментарий в ответ на аналогичный вопрос. Ознакомьтесь с ним, пожалуйста: http://mattweb.ru/moj-blog/javascript-jquery/item/63-fiksiruem-menu-pri-prokrutke-stranitsy#comment-358

Матвей, да я ознакомился со всеми комментариями. Дело в том, что в Вашем совете Вы рекомендуете указать четкое значение, которое мы знаем заранее. Но контент ведь у меня разный. Мне удобно будет или прекращать скролл, как только дойду до нужного блок или отслеживать высоту от нижнего края документа (тк высоту футера с формой обратной связи я знаю).

Сможете еще раз мне помочь? :-*
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 20.04.2016 10:27
Максим, укажите вместо четкого значения следующее:
var block_pos = $('.ваш_блок').offset();
var hide_pos = block_pos.top;

А далее как в моем комментарии
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Максим 20.04.2016 11:03
Цитирую Матвей:
Максим, укажите вместо четкого значения следующее:
var block_pos = $('.ваш_блок').offset();
var hide_pos = block_pos.top;

А далее как в моем комментарии

Да, все заработало! Огромное спасибо! Единственное у данное решения есть баг - если изменить окно браузера, то перестает работать скрипт (элемент top не становится static). А вот если перезагрузить страницу, то с новым окном браузера скрипт отрабатывает как надо.
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 20.04.2016 14:46
Это потому что в скрипте нет обработчика события изменения размеров окна (window.resize). Вы можете написать его самостоятельно
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Владимир 30.05.2016 12:10
Спасибо! Все заработало с первого раза! :lol:
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 03.06.2016 12:05
Пожалуйста :)
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Alex 02.06.2016 07:30
Здравствуйте, а как сделать чтобы фиксация отключалась в мобильной версии? занимает много места...
Ответить | Ответить с цитатой | Цитировать
 
 
+1 # Матвей 03.06.2016 12:16
Добрый день, Alex. Можно добавить в скрипт условие, чтоб он срабатывал при ширине окна браузера больше определенного значения. Вычислять ширину можно с помощью $(window).width().
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Екатерина 27.08.2016 01:24
Спасибо большое!!! Делала по первому методу Всё получилось :lol:
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Dmitry 02.09.2016 05:28
Спасибо!
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Andrey 10.10.2016 15:08
Спасибо, все работает! Очень просто и быстро! Автору выражаю огромную благодарность!
Ответить | Ответить с цитатой | Цитировать
 
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: