
スクロール位置に応じて固定要素のCSSを変更する「Midnight.js」
2014年10月15日jQueryプラグイン活用
スクロールしていった時にその位置に応じて固定要素の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; }