Squeezing Header Scroll Down Using jQuery

Squeezing Header Scroll Down Using jQuery

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>

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

 

Tags: , , ,