jQuery

【jQuery】スクロールダウンでヘッダーを絞るSqueezingHeader

August 5, 2016
SqueezingHeader

SqueezingHeaderはスクロールダウンするとヘッダーが絞られるjQueryプラグイン。

JS
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.squeezing_header.js"></script>
  <script>
    $(document).on('ready', function() {
      return $('.header').squeezingHeader(
        [
          {
            element: '.title',
            mins: {
              fontSize: 20,
              height  : 20,
              width   : 200
            }
          }
        ]
      );
    });
  </script>

HTML

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

MITライセンス