FVに大きめのスライダー画像や動画を設置したさいよく使用する、縦方向にスクロールすると、headerに背景色が施されるという装飾がありますので、そのテンプレートを紹介します。
ヘッダーのスクロールのテンプレート
<!DOCTYPE html>
<html lang="ja" >
<head>
<meta charset="UTF-8">
<title>ヘッダ追従・スクロールで色がつく</title>
<style>
/* header */
.header {
position: fixed;
top: 0;
width: 100%;
background: #fff;
transition: all 0.5s ease;
}
.hidden {
background: none;
transition: all 0.5s ease;
}
/* other - nav */
nav {
font-size: 0.8em;
font-weight: 300;
letter-spacing: 1px;
padding: 20px;
margin: 0;
}
nav a {
color: #0d3e44;
text-decoration: none;
}
nav li {
display: inline;
margin-right: 16px;
}
nav .here {
color: #fff;
padding: 5px 10px;
background: rgba(13, 62, 68, 0.42);
border-radius: 4px;
}
/* other */
html, body, header, footer, section, h1, h2, ul, li, pre {
margin: 0;
padding: 0;
}
body {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
color: rgba(255, 255, 255, .85);
font-size: .9em;
text-align: left;
background: #c67e99;
}
a {
color: #b5d898;
text-decoration: none;
margin: 0 5px;
}
a:hover {
text-decoration: underline;
}
p {
margin: 10px;
padding: 0;
}
.container {
max-width: 590px;
margin: 90px auto 0;
padding: 0 15px 30px;
}
p {
line-height: 1.8em;
}
.h2 {
font-size: 1.8em;
font-weight: 400;
text-align: center;
margin: 0 0 20px;
color: #1d1f20;
}
</style>
</head>
<body translate="no" >
<!-- ranslate="no" を指定しておくと、そのテキストが翻訳の対象から除外されることになります。-->
<header>
<div class="header hidden" id="header">
<nav>
<ul>
<li class="here">Introduction</li>
<li><a href="#">Reference</a></li>
<li><a href="#">Change Logs</a></li>
</ul>
</nav>
</div>
</header>
<!-- 以下サンプルコンテンツ -->
<div class="container">
<section>
<h2 class="h2">Introduction</h2>
<p>私は今日初めてこの学習院というものの中に這入はいりました。もっとも以前から学習院は多分この見当だろうぐらいに考えていたには相違そういありませんが、はっきりとは存じませんでした。中へ這入ったのは無論今日が初めてでございます。
さきほど岡田さんが紹介しょうかいかたがたちょっとお話になった通りこの春何か講演をというご注文でありましたが、その当時は何か差支さしつかえがあって、――岡田さんの方が当人の私よりよくご記憶きおくと見えてあなたがたにご納得のできるようにただいまご説明がありましたが、とにかくひとまずお断りを致いたさなければならん事になりました。しかしただお断りを致すのもあまり失礼と存じまして、この次には参りますからという条件をつけ加えておきました。その時念のためこの次はいつごろになりますかと岡田さんに伺うかがいましたら、此年ことしの十月だというお返事であったので、心のうちに春から十月までの日数を大体繰くってみて、それだけの時間があればそのうちにどうにかできるだろうと思ったものですから、よろしゅうございますとはっきりお受合うけあい申したのであります。ところが幸か不幸か病気に罹かかりまして、九月いっぱい床とこについておりますうちにお約束やくそくの十月が参りました。十月にはもう臥ふせってはおりませんでしたけれども、何しろひょろひょろするので講演はちょっとむずかしかったのです。しかしお約束を忘れてはならないのですから、腹の中では、今に何か云いって来られるだろう来られるだろうと思って、内々ないないは怖こわがっていました。
そのうちひょろひょろもついに癒なおってしまったけれども、こちらからは十月末まで何のご沙汰さたもなく打ち過ぎました。私は無論病気の事をご通知はしておきませんでしたが、二三の新聞にちょっと出たという話ですから、あるいはその辺の事情を察せられて、誰だれかが私の代りに講演をやって下さったのだろうと推測して安心し出しました。ところへまた岡田さんがまた突然とつぜん見えたのであります。岡田さんはわざわざ長靴を穿はいて見えたのであります。（もっとも雨の降る日であったからでもありましょうが、）そう云った身拵みごしらえで、早稲田わせだの奥おくまで来て下すって、例の講演は十一月の末まで繰り延ばす事にしたから約束通りやってもらいたいというご口上なのです。私はもう責任を逃のがれたように考えていたものですから実は少々驚おどろきました。しかしまだ一カ月も余裕よゆうがあるから、その間にどうかなるだろうと思って、よろしゅうございますとまたご返事を致しました。
右の次第で、この春から十月に至るまで、十月末からまた十一月二十五日に至るまでの間に、何か纏まとまったお話をすべき時間はいくらでも拵えられるのですが、どうも少し気分が悪くって、そんな事を考えるのが面倒めんどうでたまらなくなりました。そこでまあ十一月二十五日が来るまでは構うまいという横着な料簡りょうけんを起おこして、ずるずるべったりにその日その日を送っていたのです。いよいよと時日が逼せまった二三日前になって、何か考えなければならないという気が少ししたのですが、やはり考えるのが不愉快ふゆかいなので、とうとう絵を描かいて暮くらしてしまいました。絵を描くというと何かえらいものが描けるように聞きこえるかも知れませんが、実は他愛もないものを描いて、それを壁かべに貼はりつけて一人で二日も三日もぼんやり眺ながめているだけなのです。昨日でしたかある人が来て、この絵は大変面白い――いや面白いと云ったのではありません、面白い気分の時に描いた画えらしく見えると云ってくれたのでした。それから私は愉快だから描いたのではない、不愉快だから描いたのだと云って私の心の状態をその男に説明してやりました。世の中には愉快でじっとしていられない結果を画にしたり、書にしたり、または文にしたりする人がある通り、不愉快だから、どうかして好い心持こころもちになりたいと思って、筆を執とって画なり文章なりを作る人もあります。そうして不思議にもこの二つの心的状態が結果に現われたところを見るとよく一致いっちしている場合が起るのです。しかしこれはほんのついでに申し上あげる事で、話の筋に関係した問題でもありませんから深くは立ち入りません。――何しろ私はその変な画を眺めるだけで、講演の内容をちっとも組み立てずに暮らしてしまったのです。</p>
<p><a href="http://www.aozora.gr.jp/cards/000148/card772.html">夏目漱石 「私の個人主義」 原文(青空文庫)</a> /<a href="https://makikoseverydaylife.wordpress.com/tag/%E7%A7%81%E3%81%AE%E5%80%8B%E4%BA%BA%E4%B8%BB%E7%BE%A9/">「私の個人主義」夏目漱石【読書録１】</a></p>
</section>
</div>
<script id="rendered-js" >
// スクロールイベント
window.addEventListener("scroll", function () {
var headerElement = document.getElementById("header"); // `#header`セレクタを取得
var rect = headerElement.getBoundingClientRect(); //
var y = rect.top + window.pageYOffset; // Y方向 (縦)にスクロール量を取得（pageYOffset：windowオブジェクト。現在表示位置のY座標を取得）
if (y > 0) {// 変数yの値が0よりも
headerElement.classList.remove('hidden'); // 大きければhiddensセレクタを削除する
} else {
headerElement.classList.add('hidden'); // そうでなければhiddensセレクタを追加する
}
});
</script>
</body>
</html>
コメント