つらい・・・

【jquery】シングルページでのカレント表示について

解決済

質問者：めろんめん
質問日時：2018/10/14 18:01
回答数：1件

お世話になります。
練習でHP制作を行っているのですが行き詰ってしまいました…。
知恵をお貸し頂けませんでしょうか。

http://www.nomatokyo.ayapro.ne.jp/
こちらのページを参考にHP制作を行っています。

こちらのサイトのメインページの右端にあるページのカレント表示（オレンジのつぶつぶ）と
同じものを作りたいのですが自力で調べてみて参考にコードを書いてみるもどうしてもうまくいきません。
<a>タグなどはなく、<ul>の中の<li>にactiveを付与するものですが、スクロール地点の取得の仕方やコードの組み立て方がどうしても頭の中でぐちゃぐちゃになってしまいます。

どなたか教えて頂けないでしょうか。

： takanami1000様
コードの記入までして頂きありがとうございます！
jqueryのライブラリを使った場合はどのようになるのでしょうか？
わざわざ記入して頂いたのに申し訳ありません。
もしも可能であればそちらも教えて頂けないでしょうか...

補足日時：2018/10/15 13:42
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： takanami1000
回答日時：2018/10/15 06:24

clientHeightで各コンテンツの位置を取得しておいて、スクロールが発生したらその時の位置と取得しておいた各コンテンツの位置を比較すれば良いかと思います。

とりあえず最低限の実装で再現してみました。

<html lang="ja">
<head>
<meta charset="utf-8" />
<style type="text/css">
.box {
width: 100%;
height: 1500px;
font-size: 40px;
}
.box1, .box7 {
height: 100px;
}
.box1, .box3, .box5, .box7 {
background-color: #ffeeee;
}
.box2, .box4, .box6 {
background-color: #eeffee;
}
.ul {
position: fixed;
right: 20px;
top: 40%;
z-index: 10;
}
.ul > li {
color: red;
opacity: 0.3;
}
.ul > li.active {
opacity: 1;
}
</style>

<script type="text/javascript">
var pos={};
var currentPos = 0;
function heightSet() {
pos[0] = document.getElementById("header").clientHeight;
pos[1] = pos[0] + document.getElementById("contents0").clientHeight;
pos[2] = pos[1] + document.getElementById("contents1").clientHeight;
pos[3] = pos[2] + document.getElementById("contents2").clientHeight;
pos[4] = pos[3] + document.getElementById("contents3").clientHeight;
pos[5] = pos[4] + document.getElementById("contents4").clientHeight;
}

window.onscroll = function(){
var p = window.pageYOffset || document.documentElement.scrollTop;
for(var i=0; i<5; i++){
if(p >= pos[i] && p < pos[i+1] && i != currentPos) {
var li = document.getElementById("ul").children;
li[currentPos].className = '';
li[i].className = 'active';
currentPos = i;
break;
}
}
}
</script>

</head>

<body onload="heightSet()">

<ul class="ul" id="ul">
<li class="active">　</li>
<li>　</li>
<li>　</li>
<li>　</li>
<li>　</li>
</ul>

<div id="header" class="box box1">header</div>
<div id="contents0" class="box box2">A</div>
<div id="contents1" class="box box3">B</div>
<div id="contents2" class="box box4">C</div>
<div id="contents3" class="box box5">D</div>
<div id="contents4" class="box box6">E</div>
<div id="footer" class="box box7">footer</div>

</body>
</html>