Прокрутка страницы, фиксированная шапка

@Sanches · Регистрация: 01.03.2013

Author24 — интернет-сервис помощи студентам

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

@kalabuni · 19.11.2013, 06:08

HTML5

<body style="margin: 0"
      onscroll="var obj = document.getElementById ('mnu');
                if (document.body.scrollTop > 123)
                   with (obj.style) position = 'fixed', zIndex = 555, top = 0;
                else
                   with (obj.style) position = 'relative', zIndex = 1, top = 0">
<div style="height: 123px; background: aqua">Øàïêà</div>
<div style="height: 234px; width: 100%; background: lime" id="mnu">Ìåíþ</div>
<div style="height: 400%; background: silver">Êîíòåíò ñòðàíèöû</div>
</body>

в MSIE версий ниже 9-й работать не будет

@newJS · 19.11.2013, 15:41

Сообщение от kalabuni

в MSIE версий ниже 9-й работать не будет

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

тут похожее, но может не совсем то
https://www.cyberforum.ru/html5/thread914880.html

Добавлено через 5 часов 15 минут
работает ие8, лиса, опера и гуглоподобных
координатная сетка есть тут

CSS

body {background:window; margin:12px 15px 0 63px;}
body {background:url(scale_2000x2100.gif);}
#cap {background:pink; padding:7px;}
#mnu {background:lime; padding:7px 0;}
#mnu>div {background:lavender; padding:7px;}
#core {background:silver; padding:9px;}
 
#mnu.stop {position:fixed; top:0;}

HTML5

<div id="cap">Шапка<br>она же голова<br>она же заголовок</div>
<div id="mnu"><div>Меню пожалуй должно остаться однострочным</div></div>
<div id="core">Контент страницы
<br>1<br>
<div id="mnb">0</div>
<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br><br><br><br><br><br><br><br><br><br>11
<br>
Такая ситуация: имеется сайт, верхняя часть состоит из 2 элементов: шапка и горизонтальное меню.
Хочу сделать так, чтобы при прокрутке страницы вниз шапка исчезала за пределы экрана, а как только дойдет до меню - меню фиксировалось, и дальше после прокрутки оставалось прилеплено вверху.
Помогите осуществить это, можно ссылочку
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>12
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
text
</div>

Javascript

(function(){
var Q, d;
Q={};
d=document;
 
onload=function(){
Q.cont=d.getElementById("core").style;
Q.scr=d.getElementById("mnu");
Q.scT=Q.scr.offsetTop;
Q.scH=Q.scr.offsetHeight;
Q.scr.style.width=Q.scr.offsetWidth+'px';
 
 };
 
onscroll=function(){
var s=d.documentElement.scrollTop||d.body.scrollTop;
if(s>Q.scT){
Q.cont.marginTop=Q.scH+'px';
Q.scr.className="stop";}
else{
Q.cont.marginTop=0;
Q.scr.className="";};
 
d.getElementById("mnb").innerHTML=Q.scT+' '+Q.scH+' '+s;
 
 };
 
 
 })();

@TrAvNiCa · 13.04.2014, 14:01

А можно как нибудь сделать, что бы плавающее меню было скрыто если браузер прижат к верху. а при прокрутке появлялось

@kalabuni · 13.04.2014, 16:29

Не по теме:

Сообщение от TrAvNiCa

если браузер прижат к верху

что за странная поза?
и кто у вас браузеры прижимает? :)

@Sanches · 10.10.2015, 18:17 **[ТС]**

newJS, подскажи пожалуйста, что нужно добавить в код скрипта, чтоб при обновлении страницы, когда положение страницы вертикально смещено (вертикальный бегунок по центру), фиксированное меню появилось.
А то оно появляется, только когда начинаешь скролить (срабатывает событие onscroll)

@BANO · 10.10.2015, 18:37

Sanches, тк вызовите onscroll самостоятельно

@Sanches 4 / 4 / 5 Регистрация: 01.03.2013 Сообщений: 180
		1
	Прокрутка страницы, фиксированная шапка 18.11.2013, 23:40. Показов 4426. Ответов 6 Метки нет (Все метки) Всем привет. Такая ситуация: имеется сайт, верхняя часть состоит из 2 элементов: шапка и горизонтальное меню. Хочу сделать так, чтобы при прокрутке страницы вниз шапка исчезала за пределы экрана, а как только дойдет до меню - меню фиксировалось, и дальше после прокрутки оставалось прилеплено вверху. Помогите осуществить это, можно ссылочку 0

@TrAvNiCa 0 / 0 / 0 Регистрация: 11.04.2014 Сообщений: 3
	13.04.2014, 14:01	4
	А можно как нибудь сделать, что бы плавающее меню было скрыто если браузер прижат к верху. а при прокрутке появлялось 0

@kalabuni
	13.04.2014, 16:29 #5
	Не по теме: Сообщение от TrAvNiCa если браузер прижат к верху что за странная поза? и кто у вас браузеры прижимает? :) 0

@Sanches 4 / 4 / 5 Регистрация: 01.03.2013 Сообщений: 180
	10.10.2015, 18:17 [ТС]	6
	newJS, подскажи пожалуйста, что нужно добавить в код скрипта, чтоб при обновлении страницы, когда положение страницы вертикально смещено (вертикальный бегунок по центру), фиксированное меню появилось. А то оно появляется, только когда начинаешь скролить (срабатывает событие onscroll) 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	10.10.2015, 18:37	7
	Sanches, тк вызовите onscroll самостоятельно 0