<!DOCTYPE html>
<html lang="en">

  {% include head.html %}

  <body>
    {% include body-js.html %}
    {% include header.html %}

    <div id="page-content" class="page-content">
      <div class="wrapper">
        {{ content }}
      </div>
      {% include footer.html %}
    </div>

    <script>
        <!-- Execute after the DOM is loaded -->
        (function() {
          var content = document.getElementById('page-content');
          content.addEventListener('scroll', function(e) {
              var distanceY = window.pageYOffset || content.scrollTop,
                  shrinkOn = 300,
                  header = document.querySelector("header.post-header");
              if (distanceY > shrinkOn) {
                  classie.add(header, "smaller");
              } else {
                  if (classie.has(header, "smaller")) {
                      classie.remove(header, "smaller");
                  }
              }
          });
        })();
   </script>
   <!-- For adding and removing classes -->
   <script src="//cdnjs.cloudflare.com/ajax/libs/classie/1.0.1/classie.min.js"></script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">

  {% include head.html %}

  <body>
    {% include body-js.html %}
    {% include header.html %}

    <div id="page-content" class="page-content">
      <div class="wrapper">
        {{ content }}
      </div>
      {% include footer.html %}
    </div>

    <script>
        <!-- Execute after the DOM is loaded -->
        (function() {
          const shrinkOn = 300;
          var content = document.getElementById('page-content');
          var header = document.querySelector("header.post-header");
          content.addEventListener('scroll', function(e) {
              var distanceY = window.pageYOffset || content.scrollTop;
              if (distanceY > shrinkOn) {
                  header.classList.add("smaller");
              } else {
                  if (header.classList.contains("smaller")) {
                      header.classList.remove("smaller");
                  }
              }
          });
        })();
   </script>
  </body>
</html>

Replace dependency on classie with Element.classList
Replace dependency on classie with Element.classList
