NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

スクロール位置に応じて固定要素のCSSを変更する「Midnight.js」

2014年10月15日jQueryプラグイン活用

スクロール位置に応じて固定要素のCSSを変更する「Midnight.js」

スクロールしていった時にその位置に応じて固定要素のCSSを変更することができます。

デモページ

JavaScript

(function($){
	$(function(){	
		$('#fixed').midnight();
	});
});	

HTML

<div id="fixed">
	<div id="fixedInner">FIXED</div>
</div>
<section class="section" id="section01" data-midnight="section01"></section>
<section class="section" id="section02" data-midnight="section02"></section>
<section class="section" id="section03" data-midnight="section03"></section>

CSS

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
#fixedInner {
	font-size: 100px;
	text-align: center;
	padding-top: 180px;
}
#fixed .section01 { color: #ff9130; }
#fixed .section02 { color: #f3d52d; }
#fixed .section03 { color: #ffffff; }
.section {
	width: 100%;
	height: 100%;
}
#section01 { background-color: #ffbc30;}
#section02 { background-color: #ff9130; }
#section03 { background-color: #f3d52d; }

配布元

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. スクロール位置に応じて固定要素のCSSを変更する「Midnight.js」

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com