HTMLのヘッダー＆フッター固定CSS（スクロール対応）

htmlのページヘッダーやフッターを固定で表示するサンプルを掲載しています。
ページのスクロールでヘッダーやフッターを折り畳み（少し表示）にすることが出来ます。また、ヘッダーやフッターに戻るボタンを自動生成することもできます。

ヘッダーやフッターの高さ調整やデザインはCSSとJavaScriptの修正をしてください。

<div id="sampleHeader" class="headerStyle">
  <div class="hdStrBig">サンプルヘッダー</div>
  <div class="hdStrSmall">ヘッダーメニューなど</div>
  <div id="hdBtnArea" class="hdBtnStyle" onclick="goScroll('H')">▲</div>
</div>
 
<div id="sampleFooter" class="footerStyle">
  <div class="hdStrSmall">フッターメニューなど</div>
  <div class="hdStrBig">サンプルフッター</div>
  <div id="ftBtnArea" class="hdBtnStyle" onclick="goScroll('F')">▼</div>
</div>

<style type="text/css">
/* === BODYのpaddingを調整する ============================== */
body{
  padding-top    : 100px;      /* ヘッダーの高さに合わせる */
  padding-bottom : 100px;      /* フッターの高さに合わせる */
}
/* === ヘッダー ============================================= */
.headerStyle{
  position    : fixed;
  top         : 0;
  left        : 0;
  right       : 0;
  height      : 100px;
  background  : linear-gradient(#990000, #ff6c6c);
  z-index     : 10;
  text-align  : center;
  font-weight : bold;
}
/* === フッター ============================================= */
.footerStyle{
  position    : fixed;
  bottom      : 0;
  left        : 0;
  right       : 0;
  height      : 100px;
  background  : linear-gradient(#55d955, #003300);
  z-index     : 10;
  text-align  : center;
  font-weight : bold;
}
/* === 文字（大） =========================================== */
.hdStrBig{
  font-size   : 30px;
  line-height : 70px;
  color       : #fff;
}
 
/* === 文字（小） =========================================== */
.hdStrSmall{
  font-size   : 14px;
  line-height : 30px;
  color       : #fff;
}
/* === ヘッダー、フッターの移動ボタン ======================= */
.hdBtnStyle{
  display     : inline-block;
  position    : absolute;
  right       : 10px;
  cursor      : pointer;
  font-size   : 12px;
  line-height : 12px;
  border      : 1px solid #ccc;
  padding     : 3px;
  background  : rgba(255, 255, 255, .5);
  border-radius: 3px;
}
#hdBtnArea{
  bottom      : 5px;        /* ヘッダーはボタンを下寄せにする */
}
#ftBtnArea{
  top         : 5px;        /* フッターはボタンを上寄せにする */
}
 
/* === ヘッダー、フッターの移動ボタンにフォーカスされた時 === */
.hdBtnStyle:hover{
  background  : #fff;
}
</style>

<script type="text/javascript">
window.addEventListener("scroll", buttonDispHB, true);
window.addEventListener("scroll", buttonDispFB, true);
function buttonDispHB(){
 // ==================================================================
 //  ヘッダーの高さ調整＆移動ボタン表示制御
 // ==================================================================
  var wBody   = window.document.body;
  var wHtml   = window.document.documentElement;
  var wHeader = document.getElementById('sampleHeader');
  var wHDarea = document.getElementById('hdBtnArea');
  var wEraseH = wHeader.clientHeight - sValue["leaveHeight"];
  var nowY    = wBody.scrollTop  || wHtml.scrollTop;
 
  if(nowY <= wEraseH){
    wHeader.style.top     = '-'+nowY+'px';
    wHDarea.style.display = 'none';
  }else{
    wHeader.style.top     = '-'+wEraseH+'px';
    wHDarea.style.display = '';
  }
 
}
function buttonDispFB(){
 // ==================================================================
 //  フッターの高さ調整＆移動ボタン表示制御
 // ==================================================================
  var wBody   = window.document.body;
  var wHtml   = window.document.documentElement;
  var wFooter = document.getElementById('sampleFooter');
  var wFTarea = document.getElementById('ftBtnArea');
  var wEraseH = wFooter.clientHeight - sValue["leaveHeight"];
  var nowY    = wBody.scrollTop  || wHtml.scrollTop;
  var wNokori = (wHtml.offsetHeight - nowY) - wHtml.clientHeight;
 
  if(wNokori <= wEraseH){
    wFooter.style.bottom  =  '-'+wNokori+'px';
    wFTarea.style.display = 'none';
  }else{
    wFooter.style.bottom  = '-'+wEraseH+'px';
    wFTarea.style.display = '';
  }
 
}
function goScroll(argScroll){
 // ==================================================================
 //  スクロール位置計算
 // ==================================================================
  var wBody   = window.document.body;
  var wHtml   = window.document.documentElement;
 
  sValue["coef"] = 40;  // ←滑らか係数（大きいほど滑らか）
  sValue["cnt"]  = 0;
  sValue["sumY"] = 0;
 
  // ---------------------------------------
  //  現在のスクロール位置取得
  // ---------------------------------------
  sValue["startX"] = wBody.scrollLeft || wHtml.scrollLeft;
  sValue["startY"] = wBody.scrollTop  || wHtml.scrollTop;
 
  // ---------------------------------------
  //  終了位置を計算
  // ---------------------------------------
  if(argScroll == 'H'){
    sValue["endY"] = 0;
  }else{
    sValue["endY"] = wHtml.offsetHeight - wHtml.clientHeight;
  }
 
  // ---------------------------------------
  //  スクロールの単位計算
  // ---------------------------------------
  var moveSplitCnt = 0;
  for(var i = 1; i <= sValue["coef"]; i++) {
    moveSplitCnt += i * i;
  }
  sValue["unitH"] = Math.abs( sValue["startY"] - sValue["endY"] ) / ( moveSplitCnt * 2 );
 
  // ---------------------------------------
  //  スクロール開始
  // ---------------------------------------
  goScrollLoop();
}
function goScrollLoop(){
 // ==================================================================
 //  スクロール実行
 // ==================================================================
  var wNextY = 0;
  
  sValue["cnt"]++;
 
  // ---------------------------------------
  //  次のスクロール幅（高さ）計算
  // ---------------------------------------
  var Coef = 0;
  if(sValue["cnt"] <= sValue["coef"]){
    Coef = sValue["cnt"];
  }else{
    Coef = ((sValue["coef"] * 2) + 1) - sValue["cnt"];
  }
 
  sValue["sumY"] = sValue["sumY"] + Math.round( sValue["unitH"] * ( Coef * Coef) );
 
  // ---------------------------------------
  //  スクロール位置計算
  // ---------------------------------------
  if(sValue["startY"] > sValue["endY"]){
    wNextY = sValue["startY"] - sValue["sumY"];
    if(wNextY < sValue["endY"]){
      wNextY = sValue["endY"];
    }
  }else{
    wNextY = sValue["startY"] + sValue["sumY"];
    if(wNextY > sValue["endY"]){
      wNextY = sValue["endY"];
    }
  }
 
  if(sValue["cnt"] >= (sValue["coef"] * 2)){
      wNextY = sValue["endY"];
  }
 
  // ---------------------------------------
  //  スクロール実行
  // ---------------------------------------
  window.scrollTo(sValue["nextX"], wNextY);
 
  // ---------------------------------------
  //  次のスクロールを設定
  // ---------------------------------------
  if(wNextY == sValue["endY"]){
    clearTimeout(sValue["timer"]);                   // 終了：タイマクリア
  }else{
    sValue["timer"] = setTimeout("goScrollLoop()",10);  // 次のループ
  }
}
</script>