Прикрепить меню к верху страницы [дубликат]

303
10 декабря 2016, 10:44

На данный вопрос уже ответили:

  • Привязка блока к верху страницы 2 ответа

Здравствуйте опишу проблему.

Есть блок А (с каким то текстом). ниже идет блок Б (меню сайта). еще ниже идет блок В (слайдеры).

Как сделать так чтобы, при прокрутке когда блок А заканчивается, меню прикрепляется к верху и больше не слетает, пока не открутишь назад. Пример так как я хочу есть на сайте: http://boleu.net

Answer 1

Получаете состояние прокрутки с помощью var scrolled = window.pageYOffset || document.documentElement.scrollTop; и в зависимости от того виден ли блок А указываете для блока B position: fixed; или position: inherit;

window.onscroll = function() { 
  var scrolled = window.pageYOffset || document.documentElement.scrollTop; 
  document.getElementById('B').style.position = scrolled > 150 ? 'fixed' : 'inherit'; 
}
* { 
  margin: 0; 
  padding: 0; 
} 
.A { 
  width: 100%; 
  height: 150px; 
  background: #EEE; 
} 
 
.B { 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 50px; 
  background: #66A; 
}
<div class='A'></div> 
<div id='B' class='B'></div> 
<p>Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.</p> 
<p>Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.</p> 
<p>Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.</p> 
<p>Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.</p> 
<p>Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.</p> 
<p>Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.</p> 
<p>Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.</p> 
<p>Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.Make ten changes at the same time, not one change ten times. Multiple selections allow you to interactively change many lines at once, rename variables with ease, and manipulate files faster than ever.</p>

READ ALSO
Редактирование текста как в google docs

Редактирование текста как в google docs

Как можно сделать ввод текста с возможностью форматирования (жирный/курсив/цветной итд

354
Как дать рамку картинкой css?

Как дать рамку картинкой css?

Собственно есть рамка в фотошопе, но как сверстать - не знаюПолучается криво

297
Как добавить стили к выводу таблицы?

Как добавить стили к выводу таблицы?

Есть код для вывода таблицы из Oracle:

263
Как в bootstrap убрать адаптивность?

Как в bootstrap убрать адаптивность?

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

380