Показать только текущую страницу в меню типа Scrollspy [закрыто] ⇐ Javascript

[Anonymous]

Я сделал страницу горизонтального прокрутки мыши на основе кода, который я нашел. Как вы видите в коде, есть только 10 страниц, но я хочу добавить больше. Когда вы прокручиваете страницы, меню справа показывает вашу текущую страницу. Теперь, если было 40 или 50 страниц, меню не могло показать их все. Другими словами, страницы 3, 4 и 5 в меню. Им нужно будет измениться, поскольку пользователь продолжит прокручивать, чтобы только текущая страница и страницы до и после отображались в меню.





Animation










Page 1
Page 2
Page 3
Page 4
Page 5
Page 6
Page 7
Page 8
Page 9
Page 10







< /code>
html {
overflow:hidden;
}
body,html {
height:100vh;
}
body {
background:#000;
margin:0;
padding:0;
color:#fff;
font-family:arial;
font-size:12px;
}
div.container {
width:100%!important;
margin:0;
position:relative;
}
.container {
height:100%;
position:relative;
}
.loader {
background:#000;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
z-index:1000;
}
.loader img {
position:absolute;
margin:auto;
left:0;
right:0;
bottom:0;
top:0;
}
.sectionA {
height:100%;
}
.sectionA::after,.sectionA::before {
display:table;
content:"";
}
.sectionA::after {
clear:both;
zoom:1;
}
.sectionA.sliding {
-webkit-transition:all .4s ease;
-moz-transition:all .4s ease;
-o-transition:all .4s ease;
transition:all 1s ease-in-out .3s;
}
.navBar {
width:100px;
height:590px;
position:fixed;
right:.5vw;
margin:auto;
}
.navBar.item {
height:590px;
top:3vh;
}
.navBar.item .line {
position:absolute;
right:5px;
top:0vh;
height:590px;
width:12px;
border:1px solid #fff;
background:transparent;
}
.navBar::after,.navBar::before {
display:table;
content:"";
}
.navBar::after {
clear:both;
zoom:1;
}
.navBar .navSectionContent {
position:relative;
margin-bottom:46px;
text-align:right;
float:right;
display:inline-block;
clear:both;
}
.navBar button {
width:0;
height:0;
background:transparent;
position:absolute;
top:0;
right:0;
bottom:0;
margin:auto;
border:0;
}
.navBar .navSectionContent.active button {
background:rgba(0,255,0,.7);
width:12px;
height:43px;
position:absolute;
top:0;
right:6px;
bottom:0;
margin:auto;
}
.navBar span {
margin-right:30px;
cursor:pointer;
font-size:12px;
font-weight:200;
display:inline-block;
color:#fff;
background:rgba(0,0,0,.3);
padding:0 4px;
}
.navBar .navSectionContent.active span {
color:#fff;
background:rgba(0,255,0,.3);
padding:12px;
margin-right:18px;
border-radius:8px;
border-top-right-radius:0;
border-bottom-right-radius:0;
border:1px solid rgba(255,255,255,.3);
font-size:14px;
font-weight:400;
}
.slide {
height:100%;
float:left;
}
@media only screen and (max-width:1350px) {
.navBar {
right:19px;
}
}
.slide {
background:#skyblue;
}
< /code>
var A_util = {
browser: {
hasTouchSupport: 'createTouch' in document,
version: (navigator.userAgent.toLowerCase().match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || []) [1],
androidversion: function () {
var e = navigator.userAgent.match(/\s*Android\s*([0-9]+)\.?([0-9]+)?\.?([0-9]+)?\s*/);
return e && e[1] && e[2] ? parseFloat(e[1] + '.' + e[2]) : !(!e || !e[1]) && parseFloat(e[1])},
isWebkit: - 1 < navigator.userAgent.indexOf('AppleWebKit/'),
isMobileSafari: /(ipad|iphone|ipod|android).*apple.*mobile.*safari/.test(navigator.userAgent.toLowerCase()),
isAppleChrome: /crios/.test(navigator.userAgent.toLowerCase()),
isAppleMobileDevice: /(ipad|iphone|ipod)/.test(navigator.userAgent.toLowerCase()),
isAndroidMobileDevice: /android/.test(navigator.userAgent.toLowerCase()),
isTansoDl: navigator.userAgent.toLowerCase().match(/TansoDL/i),
isWindowsPhone: function () {
return !!(navigator.userAgent.toLowerCase().match(/Windows CE|IEMobile|Windows Phone OS/i) || 'XDomainRequest' in window)},
highPixelDensityDisplay: 2

Подробнее здесь: https://stackoverflow.com/questions/796 ... -type-menu