Squeezing Header Scroll Down Using jQuery

Squeezing header on scroll down then up

How to squeezing header on scroll down and into navigation menu using jquery plugin

Squeezing header on scroll down then up

Import Library

<script src="jquery.min.js"></script>
<script src="jquery.squeezing_header.js"></script>

Use Script

$(document).on('ready', function() {
      return $('.header').squeezingHeader(
            element: '.title',
            mins: {
              fontSize: 20,
              height  : 20,
              width   : 200

Make Content

<div class="header" style="color: white; border: 2px solid white; background: royalblue; position: fixed; top: 0; right: 0; left: 0;">
    <h1 class='title' style='height: 100px;'>Header Website</h1>

  <div class="content" style="height: 2000px;">
    <h3>Scroll down, then up.</h3>