Squeezing Header Scroll Down Using jQuery

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

IMPORT LIBRARIES
<script src="jquery.min.js"></script>
<script src="jquery.squeezing_header.js"></script>
WRITE HTML CODE
$(document).on('ready', function() {
      return $('.header').squeezingHeader(
        [
          {
            element: '.title',
            mins: {
              fontSize: 20,
              height  : 20,
              width   : 200
            }
          }
        ]
      );
    });
MAKE HTML 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>

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

 

Leave a Reply

Your email address will not be published. Required fields are marked *