Липкое меню на JS помогите организовать

373

30 марта 2017, 20:40

Добрый день.

Есть сайт

там меню изначально уже фиксированное, при скроллинге в нужном месте (скорее всего, так как js я не знаю) к меню добавляется класс с position:absolute чтобы оно осталось на месте пока не достигнет верха браузера; и дальше когда меню достигает самого верха браузера оно снова фиксируется прямо сверху и там же остается. Сможете помочь организовать такое?

Написал для начала структуру только:

<div id="nav" class="navabs">
<ul>
<li><a href="#top">главная</a></li>
<li><a href="#about">о комплексе</a></li>
<li><a href="#flat">планировки</a></li>
<li><a href="#arround">окружение</a></li>
<li><a href="#gallery">галерея</a></li>
<li><a href="#callus">контакты</a></li>
</ul>
</div>

Answer 1

Как вы и описали - при скроллинге в нужном месте (в примере offset > 300) меняем класс на класс с position: absolute, позже, при прокрутке меняем его то на position: fixed; top: 0;

function getBodyScrollTop() { 
  var offset = self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop); 
  if (offset > 300) { 
    document.querySelector('#navbar').className = "absolute-menu"; 
  } 
  if (offset > screen.height - 300) { 
    document.querySelector('#navbar').className = "fixed-menu-top"; 
  } 
} 
window.addEventListener("scroll", getBodyScrollTop);

body { 
  height: 2000px; 
} 
 
.fixed-menu-bottom { 
  position: fixed; 
  bottom: 0; 
  background: #000000; 
  width: 100%; 
  height: 80px; 
} 
 
.absolute-menu { 
  position: absolute; 
  background: #000000; 
  width: 100%; 
  height: 80px; 
  bottom: 0; 
  top: auto; 
} 
 
.fixed-menu-top { 
  position: fixed; 
  top: 0; 
  background: #000000; 
  width: 100%; 
  height: 80px; 
}

<div id="navbar" class="fixed-menu-bottom">

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Шрифт в Firefox не уменьшается

Есть код меню

252

MySQL

Сумма двух столбцов со своим условием для каждого за один проход MySQL

Есть таблица, содержащая следующие поля: ID, FirstUserID, SecondUserID, FirstUserCount, SecondUserCountПри этом гарантируется, что FirstUserID <= SecondUserID

389

MySQL

Обновить записи в таблице?

Есть задачаНужно вбить в поле процент, и на этот процент уменьшить увеличить поле price в выбранной категории, а значение которое было в поле...

257

MySQL

ERROR 2006 (HY000): MySQL server has gone away

При вводе любой команды через командную строку Windows возникает такая ошибка: ERROR 2006 (HY000): MySQL server has gone awayПроисходит реконнект и команда срабатывает...

259