【jquery】スクロールされたコンテンツに応じて変化するメニュー | BLOG

javascript

スクロールしていくと、表示されたコンテンツに応じてナビゲーションがハイライトされたりするjqueryをメモします。

ワンページデザインなんかでよく見かけるようになりましたが、スクロールに応じてナビゲーションが変化するギミックありますよね。

今回jqueryを使用して実装してみたいと思います。

【jquery】スクロールされたコンテンツに応じて変化するメニュー

スクロールしていくと、右側のドットナビゲーションがコンテンツ「block1〜5」に応じて変化するページを想定します。

JSを設置する

まずはjavascriptを設置しましょう

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="js/function.js"></script>

HTMLを記述する

HTMLを記述します。

index.html

<header id="header">
<nav id="global-nav">
<ul>
<li><a href="#block1"></a></li>
<li><a href="#block2"></a></li>
<li><a href="#block3"></a></li>
<li><a href="#block4"></a></li>
<li><a href="#block5"></a></li>
</ul>
</nav>
</header>

<main class="block" id="block1"><h2>block1</h2></main>

<section class="block" id="block2">
<h3>block2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>

<section class="block" id="block3">
<h3>block3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>
<section class="block" id="block4">
<h3>block4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>

<section class="block" id="block5">
<h3>block5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
</section>


<section class="block">
<h3>NO highlight</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>

<footer id="footer" class="block"><span>foota</span></footer>

CSSを記述する

CSSを記述します。

CSS

#header{
position: fixed;
top:40%;
right:1%;
}
main{
width:100%;
margin:0 auto;
text-align:center;
height:100vh;
background:#f3f3f3;
display: flex;
justify-content: center;
align-items: center;
}
main>h2{
color:#222;
font-size:3rem;
}
h3{
font-size:3rem;
text-align: center;
margin: 0 0 30px 0;
}
p{
font-size:1.2rem;
line-height:1.5em;
text-align: justify;
text-justify: inter-ideograph;
margin-top:20px;
}
nav ul{
list-style: none;s

}
nav ul li{
padding-bottom:15px;
}
nav ul li a{
margin:0 auto;
text-align:center;
display: block;
text-decoration: none;
width:10px;
height:10px;
transition: 0.3s ease;
background-color:#ccc;
border-radius:50px;
}

nav ul li.current a,
nav ul li a:hover{
background-color:#222;
width:14px;
height:14px;
transition: 0.3s ease;
}
section{
padding:100px;
}

section:nth-child(2n){
background:#f3f3f3; 
}
footer{
height:200px;
width:100%;
margin:0 auto;
text-align:center;
background:#222;
display: flex;
justify-content: center;
align-items: center;
}
#footer>span{
display:block;
color:#fff;
font-size:2rem;
}

JSを記述する

javascriptを記述します。function.jsに記述します。

function.js

var presentTop = [];

function presentCheck(){
var headerH = $("#header").outerHeight(true);
$(".block").each(function(i) {
presentTop[i] =Math.round(parseInt($(this).offset().top-headerH));
});
}

function ScAnime() {
var scroll = Math.round($(window).scrollTop());
var navBlock = $("#global-nav li");
$("#global-nav li").removeClass('current');
if(scroll >= 0 && scroll < presentTop[1]) {
$(navBlock[0]).addClass('current');
}
else if(scroll >= presentTop[1] && scroll < presentTop[2]) {
$(navBlock[1]).addClass('current');
} 
else if(scroll >= presentTop[2] && scroll < presentTop[3]) {
$(navBlock[2]).addClass('current');
} 
else if(scroll >= presentTop[3] && scroll < presentTop[4]) {
$(navBlock[3]).addClass('current');
}
else if(scroll >= presentTop[4] && scroll < presentTop[5]) {
$(navBlock[4]).addClass('current');
}
else {
$("#global-nav li").removeClass('current');
} 
}

$(window).scroll(function () {
presentCheck();
ScAnime();
});

$(window).on('load', function () {
presentCheck();
ScAnime();
});

ドットナビゲーション部分「id=”header”」の高さを取得し、.blockというクラス名がついたエリアの位置を取得します。

function presentCheck(){
var headerH = $("#header").outerHeight(true);
$(".block").each(function(i) {
presentTop[i] =Math.round(parseInt($(this).offset().top-headerH));
});
}

続いてナビゲーションに現在地のクラスをつけるための設定をします。スクロールに応じて.blockというクラス名のコンテンツごとに変化させるため「#global-nav li」を取得し順番を定義します。

var scroll = Math.round($(window).scrollTop());
var navBlock = $("#global-nav li");

スクロール値を取得し定義した順番と.blockの順番を比較。該当のコンテンツが表示されたら「.current」を追加します。

if(scroll >= 0 && scroll < presentTop[1]) {//.block 1つめの高さ未満
$(navBlock[0]).addClass('current');//1つめのliにクラスを付与
}
else if(scroll >= presentTop[1] && scroll < presentTop[2]) {//.block 1つめ以上.block 2つめ未満
$(navBlock[1]).addClass('current');//2つめのliにクラスを付与
} 
中略
else if(scroll >= presentTop[4] && scroll < presentTop[5]) {// .block 5つめ以上
$(navBlock[4]).addClass('current');//5つめのliにクラスを付与
}

ナビゲーションに該当しないコンテンツが表示された場合は「.current」を全て削除します。今回は<h3>NO highlight</h3>以降は「.current」を全て削除します。

else {
$("#global-nav li").removeClass('current');
}

ナビゲーションとスクロールを連動させます。

$(window).scroll(function () {
presentCheck();/
ScAnime();
});

またリロードの際すぐにナビゲーションをハイライトさせたい場合記述します。

$(window).on('load', function () {
presentCheck();
ScAnime();
});

以上です。

比較的簡単に実装できるので、パララックスとマージさせるなど使い方は色々ありそうです。

デモはこちら

Spread the love

BLOG

Article