【jQuery】スクロールダウンでヘッダーを絞る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ライセンス

 
SqueezingHeader

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

  • LATEST
  • RELATED
  • POPULAR