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

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

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

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

HTML

<div class="container">
  <header class="header">HEADER</header>
  <nav class="menu">MENU</nav>
  <article>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Hic, labore. Error quis aliquam omnis doloribus blanditiis, quisquam quas, ipsum cum corporis incidunt inventore molestiae voluptates sequi, laudantium iure! Ab, quaerat.</p>
  </article>
  <footer class="footer">FOOTER</footer>
</div>

CSS

* {
  padding: 0;
  margin: 0;
}
.container {
  position: relative;
  padding-top: 0;
}
.header,
.menu,
.footer {
  background-color: #333;
  padding: 40px 0;
  text-align: center;
  color: #fff;
  font-family: sans-serif;
  width: 100%;
  position: relative;
  z-index: 2;
}
.menu {
  position: sticky;
  top: 0;
}
.menu.fixed {
  position: fixed;
}
article {
  background-color: green;
  padding: 30px 0;
}
article p {
  width: 640px;
  max-width: 90%;
  margin: 0 auto 20px;
  font-size: 20px;
  color: #fff;
}
.header {
  background-color: blue;
}
.footer {
  background-color: purple;
}

JS

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

var $menu = $(".menu");
var $menuOffsetTop = $menu.offset().top;
var $menuHeight = $menu.outerHeight();
var $menuParent = $menu.parent();
var $menuParentPaddingTop = parseFloat($menuParent.css("padding-top"));

checkWidth();

function checkWidth() {
  // for mobile - you need change 1920 to 992
  if (window.matchMedia("(max-width: 1920px)").matches) {
    if ($menu.length !== 0) {
      $(window).scroll(onScroll);
    }
  }
}

function onScroll() {
  if ($(window).scrollTop() > $menuOffsetTop) {
    $menu.addClass("fixed");
    $menuParent.css({ "padding-top": $menuParentPaddingTop + $menuHeight });
  } else {
    $menu.removeClass("fixed");
    $menuParent.css({ "padding-top": $menuParentPaddingTop });
  }
}

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

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

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