Фиксированный блок при прокрутке с поддержкой IE

Еще один фиксированный блок Меню при прокрутке страницы.

Было бы замечательно, если бы IE поддерживало свойство position: sticky;, которое ведет себя как position: relative в пределах своего родителя, а при смещении порогового значения в окне просмотра (в примере ниже, при достижении 15px от верхней части окна просмотра) элемент начнет вести себя как position: fixed;.

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;

  top: 15px; /* Элемент становится фиксированным сверху на расстоянии в 15px */
}

Все нормальные браузеры поддерживают свойство position: sticky;, конечно же, кроме IE, для которого нам придется написать скрипты.

Примерная структура HTML для создания фиксированного блока

<div class="container">
  <header class="header">HEADER</header>
  <div class="content">
    <div class="menu">
      <a>Home</a>
      <a>About</a>
      <a>Portfolio</a>
      <a>Blog</a>
      <a>Contact</a>
    </div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, qui minus. Voluptate repellendus, modi, voluptates nihil pariatur id quasi, iusto voluptatibus tempora ullam quia reiciendis ratione atque in quae fugiat.</p>
    </div>
    <div class="text"></div>
  </div>
</div>

CSS

.menu{
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-around;
  background-color: pink;
  padding: 10px 0;
  font-family: 'Roboto Slab', sans-serif;
  text-transform: uppercase;
}
.menu.sticky{
  position: fixed;
}

.header{
  padding: 40px;
  text-align: center;
  background-color: yellow;
  font-family: 'Roboto Slab', sans-serif;
}
.container {
  max-width:90%;
  width: 600px;
  margin: 0 auto;
  position: relative;
  
}
.text{
  min-height: 100vh;
  background-color: #ccc;
  border-bottom: 2px solid green;
  padding: 20px;
}
.text p{
  margin-bottom: 20px;
}
@media screen and (max-width: 480px){
  .menu a{
    font-size: 10px;
  }
}

JS

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

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

Скрипт JS

$(function() {

  (function fixedMenu() {
    var $menu = $(".menu");

    if ($menu.length != 0) {
      var $menuHeight = $menu.outerHeight();
      var $menuMarginBottom = parseFloat( $menu.css("margin-bottom") );
      var $menuOffsetY = $menu.offset().top;
      var $menuParent = $menu.parent();
      var $menuParentPaddingTop = parseFloat( $menuParent.css("padding-top") );

      $(window).scroll(fixMenu);

      $(window).resize(resizeMenu);

      function fixMenu() {
        var $menuWidth = $menu.outerWidth();
        var $menuParentWidth = $menuParent.outerWidth();

        if ($(window).scrollTop() >= $menuOffsetY) {
          $menu.addClass("sticky").css({ "width": $menuParentWidth });
          $menuParent.css({ "padding-top": $menuHeight + $menuMarginBottom + $menuParentPaddingTop });
        } else {
          $menu.removeClass("sticky").css({ "width": $menuWidth });
          $menuParent.css({ "padding-top": $menuParentPaddingTop });
        }
      }

      function resizeMenu() {
        var $menuParentWidth = $menuParent.outerWidth();
        $menu.css({ width: $menuParentWidth });
      }
    }
  })();

});

See the Pen JLrMBO by Denis (@deniscreative) on CodePen.