Fixed header

@den4ik_ · Регистрация: 27.02.2017

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

Здравствуйте уважаемые форумчане,

Поделитесь опытом кто как делает статический header.
Допустим fixed header имеет min-width такую же как и контент.
Интересуют варианты, которые предусматривают что при достижении min-width header будет реагировать горизонтальную полосу прокрутки также как и весь контент сайта. Так же этот fixed header хотелось бы реализовать и для мобильных устройств. интересуют любые варианты на native языке или с использованием frameworkов
У меня пока такой вариант есть.

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
 padding: 0px;
 margin: 0px;
}
#fixed-header
{
 width: 100%;
 border-bottom: 1px solid #000000;
 -webkit-box-shadow: 0px 0px 19px 0px #000000;
 box-shadow: 0px 0px 19px 0px #000000;
 position: fixed;
 top: 0px;
 left: 0px;
 right: 0px;
 background-color: #FFFFFF;
 min-width: 900px;
 padding-top: 0px;
 padding-right: 0px;
 padding-bottom: 0px;
 padding-left: 0px;
 min-height: 100px;
}
#content-wrapper
{
 width: 900px;
 height: 1000px;
 margin-left: auto;
 margin-right: auto;
 border-right: 1px solid #000000;
 border-left: 1px solid #000000;
 margin-top: 100px;
}
#fixed-header .text
{
 margin-top: 5px;
 margin-bottom: 8px;
 margin-right: 9px;
 margin-left: 10px;
}
</style>
</head>
 
<body>
<div id="fixed-header">
<div class="text">
Что такое Lorem Ipsum?
Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. 
</div>
</div>
<script type="text/javascript">
    var div_menu = document.getElementById('fixed-header'); 
    window.onscroll = function (e) {  
        if (div_menu){
            div_menu.style.left = (window.pageXOffset * -1) + 'px';
            
        }
            
    }
    div_menu.style.height()  
</script>
<div id="content-wrapper"></div>
</body>
</html>

@Shakalaka · 11.04.2017, 17:17

den4ik_,

HTML5
1
2
3
4
5
6
7
8
<div class="wrap">
  <div id="header">
    <div class="container"><h1>FIXED HEADER</h1></div>
  </div>
  <div id="main">
    <div class="container">lorem1000</div>
  </div>
</div>

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
.wrap{
  padding-top:60px;
}
.container{
  padding:0 15px;
}
#header{
  height:50px;
  background:transparent;
  position:fixed;
  top:0;
  left:0;
  right:0;
}
#header > .container{
  background:#333;
  height:100%;
  color:#fff;
}
@media screen and (min-width:768px){
  .container{
    width:740px;
    margin:auto;
  }
}
@media screen and (min-width:992px){
  .container{
    width:960px;
    margin:auto;
  }
}
@media screen and (min-width:1200px){
  .container{
    width:1170px;
    margin:auto;
  }
}

https://jsfiddle.net/shakalaka/jhctxdo2/

@den4ik_ · 11.04.2017, 20:20 **[ТС]**

Вы имеете ввиду, что лучше этим не замачиваться всякими там скролами, а сделать адаптивные (под определенную ширину) лайоуты, и под них затачивать сайт? Ну типа под саймый узкий сделать одну колонку и мобиле интерфейс... На побольше 2 колонки... и т.д.

Но мне вот понравилось как это сделано у vk. Вот у возник вопрос... Ну да я может ленивый не покопался в страничке vk а сразу полез сюда.

Добавлено через 1 час 44 минуты
Sticky elements что то похожее на то что я хочу

Новые блоги и статьи Все статьи Все блоги /
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .

@den4ik_ 3 / 3 / 1 Регистрация: 27.02.2017 Сообщений: 13
	11.04.2017, 20:20 [ТС]
	Вы имеете ввиду, что лучше этим не замачиваться всякими там скролами, а сделать адаптивные (под определенную ширину) лайоуты, и под них затачивать сайт? Ну типа под саймый узкий сделать одну колонку и мобиле интерфейс... На побольше 2 колонки... и т.д. Но мне вот понравилось как это сделано у vk. Вот у возник вопрос... Ну да я может ленивый не покопался в страничке vk а сразу полез сюда. Добавлено через 1 час 44 минуты Sticky elements что то похожее на то что я хочу 0