jQuery addClass example

Change class name on click in jQuery

by Fairlight

HTML

<div id="header">
<p>
ヘッダーを固定する
</p>
<p>
ヘッダーを固定する
</p>
<p>
ヘッダーを固定する
</p>
</div>	
<div class="Contents">	
<h1>大見出し</h1>
<p>段落</p>
<h2>中見出し</h2>
<p>段落</p>
<h3>小見出し</h3>
<p>段落</p>
<h1>大見出し</h1>
<p>段落</p>
<h2>中見出し</h2>
<p>段落</p>
<h3>小見出し</h3>
<p>段落</p>
<h1>大見出し</h1>
<p>段落</p>
<h2>中見出し</h2>
<p>段落</p>
<h3>小見出し</h3>
<p>段落</p>
</div>

CSS

body{
margin: 20px;	/* bodyの外側の余白を指定する */
padding: 50px 10px 50px 10px;	/* bodyの内側余白を指定する(上:右:下:左) */
}
#header {
position: fixed;	/* ヘッダーを固定する */
top: 0;	/* 上部から配置の基準位置を決める */ 
left: 0;	/* 左から配置の基準位置を決める */ 
width: 100%;	/* ヘッダーの横幅を指定する */
height: auto;	/* ヘッダーの高さを指定する */
padding: 10px;	/* ヘッダーの余白を指定する(上下左右) */
background-color: #31a9ee;	/* ヘッダーの背景色を指定する */
color: #000000;	/* フォントの色を指定する */
}	
.Contents {
width: 100%;	/* コンテンツの横幅を指定する */
overflow: auto; /* コンテンツの表示を自動に設定（スクロール） */
}
button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

//ヘッダーの高さ分だけコンテンツを下げる
$(function() {
    var height=$("#header").height();
    $("body").css("margin-top", height + 0);//10pxだけ余裕をもたせる
});