Липкий плавающий header как в Google Play

@JackPaller · Регистрация: 05.06.2014

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

Вообщем такая тема: создаю дизайн сайта на подобии как в приложении Google Play и столкнулся с одной проблемой!! В приложении очень хитро сделали header который разделен на 2 части (главный блок с кновкой меню и поиском, блок меню) и при скроле вниз верхний главный блок скрывается а нижний фиксируется!! Но стоит чуть чуть пролиснуть вверх (не доходя до начала страницы) снова вылазил главный блок..

Я перепробовал множество вариантов и был близок к целе но пришел момент когда я вынужден просить помощи у профи

Помогите чем сможете.. В конце концов кому-то готовый вариант может пригодиться в будущем, а не только мне

Вот мои наработки! У меня получилось осуществить скрытие и залипание но не так как хотелось!! На мобильных устройствах и вовсе ерунда

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html><html lang="ru"><head><meta charset="windows-1251"/><title>EXinfo - News</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<link rel="stylesheet" type="text/css" href="styles/media-queries.css"/>
<link rel="shortcut icon" href="img/favicon.png">
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var HeaderTop = $('#headbar').offset().top;
        var HeaderTop = $('#center-headbar').offset().top;
        
        $(window).scroll(function(){
                if( $(window).scrollTop() > HeaderTop ) {
                        $('#headbar').css({position: 'static', top: '0px'});
                        $('#center-headbar').css({top: '0px'});
                } else {
                        $('#headbar').css({position: 'fixed', top: '0px'});
                        $('#center-headbar').css({top: '50px'});
                }
        });
    });
</script>
</head><body>
 
<div id="headbar">
 
<div id="wrap-headbar">
<div id="left-headbar">
 
</div>
<div id="center-headbar">
<ul>
<li><a href="">ГЛАВНАЯ</a></li>
<li><a id="active" href="">НОВОСТИ</a></li>
<li><a href="">ИСТОРИЯ</a></li>
<li><a href="">СТАТЬИ</a></li>
</div>
<div id="right-headbar">
 
</div>
</div>
 
</div>
 
</body></html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
#headbar{
background:#4c82ff;
width:100%;
min-height:50px;
}
#wrap-headbar{
}
#left-headbar{
width:100px;
height:50px;
border:1px solid #000;
}
#center-headbar{
background:#4c82ff;
text-align:center;
width:100%;
padding:0px;
position:fixed;
}
#center-headbar ul{
margin:0px;
padding:0px;
list-style-type:none;
}
#center-headbar li{
margin:0px;
padding:0px;
list-style-type:none;
display:inline-block;
}
#center-headbar a{
font-family:Helvetica-Medium;
color:#b2c9ff;
padding:10px;
display:block;
}
#center-headbar a:hover{
color:#fff;
text-decoration:none;
}
#center-headbar #active{
color:#fff;
border-bottom:2px solid #fff;
}
#right-headbar{
width:100px;
height:50px;
border:1px solid #000;
position:absolute;
top:0;
right:0;
float:right;
}

Липкий плавающий header как в Google Play

@Lazy_Den · 04.11.2014, 18:59

JackPaller, если вы скопировали HTML-код "как есть", то обратите внимание на то, что у вас ошибка в разметке - нет закрывающего тега </ul>
Это может и не решит ваш вопрос, но всё же...

@JackPaller · 04.11.2014, 19:02 **[ТС]**

он особой роли не играет! 1-2 незакрытых тега в html допускаются. все же не понятно как сделать нормальный скрипт.. аналогов нет

@Lazy_Den · 04.11.2014, 19:22

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

1-2 незакрытых тега в html допускаются

Ошибочное мнение.

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

все же не понятно как сделать нормальный скрипт

Я пока не могу понять в чем вы видите некорректную работу. Вот я сделал fiddle, покрутил его, менял размер окна, но так и не понял в чём ошибка.

@JackPaller · 04.11.2014, 19:41 **[ТС]**

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

@Lazy_Den · 04.11.2014, 19:52

JackPaller, Если я правильно понял, то смотрите такой вариант
Дописываем в стили класс:

CSS
1
2
3
4
.fixedbar {
    position:fixed;
    top: 0px;
}

И переключаем его в нужных местах при прокрутке

JavaScript
1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
    var HeaderTop = $('#center-headbar').offset().top;
    $(window).scroll(function(){
        if( $(window).scrollTop() > HeaderTop ) {
            $('#center-headbar').addClass('fixedbar');
        } else {
            $('#center-headbar').removeClass('fixedbar');
        }
    });
});

@JackPaller · 04.11.2014, 20:03 **[ТС]**

Почти так, но нужно что-бы header (как в моем случае) вылазил в любом месте на странице лишь прокрутив немного вверх! А прокрутив немного вниз он иcчезал и оставался лишь center-header

@Lazy_Den · 04.11.2014, 20:15

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

вылазил в любом месте на странице лишь прокрутив немного вверх

На такие вещи нужно сразу ставить акцент, потому что у Google Play, по крайней мере в десктоп-версии, такой фишки нет.
А для такой цели, вам нужно следить за направлением прокрутки колеса, так называемая "delta". Знаете как это организовать?

@JackPaller · 04.11.2014, 20:19 **[ТС]**

Я изучаю 3 языка одновременно и только на практике! Это моя большая проблема, поэтому вполне очевидно что я такого не знаю. С другой стороны зная бы это я бы не стал задавать столь прозрачные вопросы

@Lazy_Den · 04.11.2014, 20:23

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

@JackPaller · 04.11.2014, 20:58 **[ТС]**

Я все-равно не понимаю как реализовать все это дело и соединить в одно целое! Видимо ждать помощи неоткого

Новые блоги и статьи Все статьи Все блоги /
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	04.11.2014, 18:59
	JackPaller, если вы скопировали HTML-код "как есть", то обратите внимание на то, что у вас ошибка в разметке - нет закрывающего тега </ul> Это может и не решит ваш вопрос, но всё же... 1

@JackPaller 0 / 0 / 0 Регистрация: 05.06.2014 Сообщений: 20
	04.11.2014, 19:02 [ТС]
	он особой роли не играет! 1-2 незакрытых тега в html допускаются. все же не понятно как сделать нормальный скрипт.. аналогов нет 0

@JackPaller 0 / 0 / 0 Регистрация: 05.06.2014 Сообщений: 20
	04.11.2014, 19:41 [ТС]
	Нужно что-бы он верхняя часть этого бара возвращалась не в начале страницы, а в любой другой части прокрутив немного вверх. 0

@JackPaller 0 / 0 / 0 Регистрация: 05.06.2014 Сообщений: 20
	04.11.2014, 20:03 [ТС]
	Почти так, но нужно что-бы header (как в моем случае) вылазил в любом месте на странице лишь прокрутив немного вверх! А прокрутив немного вниз он иcчезал и оставался лишь center-header 0

@JackPaller 0 / 0 / 0 Регистрация: 05.06.2014 Сообщений: 20
	04.11.2014, 20:19 [ТС]
	Я изучаю 3 языка одновременно и только на практике! Это моя большая проблема, поэтому вполне очевидно что я такого не знаю. С другой стороны зная бы это я бы не стал задавать столь прозрачные вопросы 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	04.11.2014, 20:23
	Сообщение было отмечено JackPaller как решение Решение JackPaller, Информации на эту тему в инете более чем достаточно, поэтому не очень хочется заниматься пересказыванием. Вот, например, можете почитать эту статью 1

@JackPaller 0 / 0 / 0 Регистрация: 05.06.2014 Сообщений: 20
	04.11.2014, 20:58 [ТС]
	Я все-равно не понимаю как реализовать все это дело и соединить в одно целое! Видимо ждать помощи неоткого 0

Опции темы

Липкий плавающий header как в Google Play

Решение