Фиксированное меню при прокрутке страницы только для мобильных

02.07.2017

Немного другая вариация фиксированного меню.

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

Код максимально простой для примера.

HTML

<header></header>
<nav>MENU</nav>
<article></article>
<footer>FOOTER</footer>

CSS

* {
  padding: 0;
  margin: 0;
}
header {
  background-color: blue;
  height: 300px;
}
nav, footer {
  background-color: #333;
  padding: 40px 0;
  text-align: center;
  color: #fff;
  font-family: sans-serif;
  width: 100%;
  position: relative;
  z-index: 2;
}
nav.fixed {
  position: fixed;
  top: 0;
}
article {
  background-color: green;
  height: 2000px;
}
footer {
  background-color: purple;
}

JS

Не забываем подключить jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

А затем такой код нашего скрипта:

$(function() {
  $(checkPosition);
  function checkPosition() {
    if (window.matchMedia("(max-width: 992px)").matches) {
      var menuWrap = $("nav");
      if (menuWrap.length !== 0) {
        var stickyHeaderTop = menuWrap.offset().top;
      }

      $(window).scroll(function() {
        if ($(window).scrollTop() > stickyHeaderTop) {
          menuWrap.addClass("fixed");
        } else {
          menuWrap.removeClass("fixed");
        }
      });
    }
  }
});

Рабочий пример

В примере на Codepen отключена проверка на ширину экрана, чтобы пример был рабочий на экране любой ширины.

See the Pen Sticky Header on Scroll for Mobile by Denis (@deniscreative) on CodePen.0

Полезная инфа:

Оставить комментарий