ナビゲーションがページの上部までスクロールしたらナビのpositionがfixedになってなんか良い感じになるやつです。
見たほうがわかりやすいのでデモ(PC)をどうぞ。
Logoもニョキッと表示されます。
スマホ対応の際は最初からpositionをfixedにしたり、トグルしたりして対応すれば良いかと思いますので必要に応じてイジってみて下さい
HTMLの準備
<!DOCTYPE html>
<html>
<head>
<title>Sticky Nav</title>
</head>
<link rel="stylesheet" href="styles.css">
<body>
<div class="parallax topimg">
<div class="box">
<h2>Heading</h2>
</div>
</div>
<nav id="main">
<ul>
<li class="logo"><a href="">LOGO</a></li>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">SERVICE</a></li>
<li><a href="">RECRUIT</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</nav>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<script src="main.js"></script>
</body>
</html>文章は皆さんご存知Lorem Ipsumから持ってきています〜
CSSの準備
html body {
height: 100%;
width: 100%;
margin: 0 auto;
}
body {
background: #ECEBEC;
margin: 0;
}
/*パララックス*/
div.parallax {
width: 100%;
height:70vh;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.topimg {
background: url(coding.jpg);
}
.box{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.box h2{
margin: 0;
font-size: 60px;
color: #fff;
}
nav {
z-index: 100;
background: black;
}
.active nav {
position: fixed;
top: 0;
left: 0;
right: 0;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.active li.logo {
max-width: 500px;
}
ul {
display: flex;
justify-content: space-around;
margin: 0;
padding: 0;
}
li {
list-style: none;
flex: 1;
}
/*max-widthじゃないと反映されない(widthだとダメ)*/
li.logo {
max-width: 0;
overflow: hidden;
background: #fff;
transition: all 0.6s;
font-weight: 600;
}
li.logo a {
color: black;
}
li a {
text-align: center;
font-weight: bold;
color: #fff;
text-decoration: none;
padding: 20px 0;
display: block;
}
.content {
z-index: -1;
background: #fff;
max-width: 800px;
margin: 30px auto;
}
.content p {
padding: 2.5em 3.5em;
}パララックスは別にしなくておけーです笑
ナビバーがfixedした時に左からニョキッとLogoが表示されるようにしたいので、max-width: 0;をつけておいて、.activeクラスがついた時だけmax-width: 500px(お好きな値をどうぞ);に変えます。
JSの準備
const nav = document.querySelector('#main'); // navを取得
const topOfNav = nav.offsetTop; //ページのトップからnavまでの距離
function makeNavFixed() {
if(window.scrollY >= topOfNav) { // スクロールがtopOfNavより大きい時
document.body.style.paddingTop = nav.offsetHeight + 'px'; // bodyのtopにpaddingをつける(navがfixedになるので)
document.body.classList.add('active'); // activeというclassをbodyにつける
} else {
document.body.style.paddingTop = 0; // bodyのtopにつけたpaddingを0に戻す
document.body.classList.remove('active'); // bodyからactiveクラスを削除
}
}
window.addEventListener('scroll', makeNavFixed); // スクロール時に発動なにがなんなのかはコメントで説明しています。
js自体はシンプルです
window.scrollYとoffsetTopがわかっていれば簡単ですね(^^)
以上でいい感じにナビメニューがページの上部までスクロールされるとfixedされるようになりました。
fixedにするといちいちスクロールしなくてもナビメニューのリンクをクリックできるので便利ですね(´ω｀)
＊Wes Bosさんのjavascript30に出てくるsticky-navの応用でパララックスをつけてみました。
では〜