我有一个多行的页面,每行都包含一个背景图像(封面),其上有一些内容,就像幻灯片一样。滚动时更改菜单上的当前项目
我还有一个导航菜单,显示页面上幻灯片的数量,如果您单击菜单项,该行将滑入视图。
问题是,当我滚动并手动移动到特定行时,菜单保持不变,显示它仍在第一行/幻灯片上。
当我滚动时,我需要能够动态更改导航菜单的当前项目,此时它在您点击菜单项但不滚动时起作用。
无论何时滚动到行/幻灯片,只需切换类nav__item--current
。
DEMOhttps://jsfiddle.net/gz2r7zLa/
HTML
<section id="slideshow">
<nav class="nav nav--beca">
<a href="#slide1" class="nav__item nav__item--current"><span class="nav__item-title"><span>01/06</span></span></a>
<a href="#slide2" class="nav__item"><span class="nav__item-title"><span>02/06</span></span></a>
<a href="#slide3" class="nav__item"><span class="nav__item-title"><span>03/06</span></span></a>
<a href="#slide4" class="nav__item"><span class="nav__item-title"><span>04/06</span></span></a>
<a href="#slide5" class="nav__item"><span class="nav__item-title"><span>05/06</span></span></a>
<a href="#slide6" class="nav__item"><span class="nav__item-title"><span>06/06</span></span></a>
</nav>
<div class="container-fluid">
<div class="row" id="slide1">
<div class="col-md-12 slide">
<div class="slide-background" style="background: url('assets/img/slides/1.png') center center/cover;"></div>
</div>
</div>
<div class="row" id="slide2">
<div class="col-md-12 slide">
<div class="slide-background" style="background: url('assets/img/slides/2.jpg') center center/cover;">
<div class="slide-content">
<h2>UNDP SAVE THE PARSLEY</h2>
<p class="hidden-xs">Save the Parsley is a 3-minute short animation video that was created for the UNDP about Lebanon 2050 and Climate Change. Originally requested as an infographic, The Council re-imagined the brief. Instead of speaking directly about climate change, the video tackles the danger of losing what the Lebanese value most: Taboulleh.</p>
<a href="#" class="btn btn-default btn-lg slide-button">Explore</a>
</div>
</div>
</div>
</div>
<div class="row" id="slide3">
<div class="col-md-12 slide">
<div class="slide-background" style="background: url('assets/img/slides/3.jpg') center center/cover;">
<div class="slide-content">
<h2>UNDP SAVE THE PARSLEY</h2>
<p class="hidden-xs">Save the Parsley is a 3-minute short animation video that was created for the UNDP about Lebanon 2050 and Climate Change. Originally requested as an infographic, The Council re-imagined the brief. Instead of speaking directly about climate change, the video tackles the danger of losing what the Lebanese value most: Taboulleh.</p>
<a href="#" class="btn btn-default btn-lg slide-button">Explore</a>
</div>
</div>
</div>
</div>
<div class="row" id="slide4">
<div class="col-md-12 slide">
<div class="slide-background" style="background: url('assets/img/slides/4.jpg') center center/cover;">
<div class="slide-content">
<h2>UNDP SAVE THE PARSLEY</h2>
<p class="hidden-xs">Save the Parsley is a 3-minute short animation video that was created for the UNDP about Lebanon 2050 and Climate Change. Originally requested as an infographic, The Council re-imagined the brief. Instead of speaking directly about climate change, the video tackles the danger of losing what the Lebanese value most: Taboulleh.</p>
<a href="#" class="btn btn-default btn-lg slide-button">Explore</a>
</div>
</div>
</div>
</div>
<div class="row" id="slide5">
<div class="col-md-12 slide">
<div class="slide-background" style="background: url('assets/img/slides/5.jpg') center center/cover;">
<div class="slide-content">
<h2>UNDP SAVE THE PARSLEY</h2>
<p class="hidden-xs">Save the Parsley is a 3-minute short animation video that was created for the UNDP about Lebanon 2050 and Climate Change. Originally requested as an infographic, The Council re-imagined the brief. Instead of speaking directly about climate change, the video tackles the danger of losing what the Lebanese value most: Taboulleh.</p>
<a href="#" class="btn btn-default btn-lg slide-button">Explore</a>
</div>
</div>
</div>
</div>
<div class="row" id="slide6">
<div class="col-md-12 slide">
<div class="slide-background" style="background: linear-gradient(rgba(10,24,12,0.8), rgba(3,2,1,0.8)), url('assets/img/slides/6.jpg') center center/cover;">
<div class="slide-content">
<h2>UNDP SAVE THE PARSLEY</h2>
<p class="hidden-xs">Save the Parsley is a 3-minute short animation video that was created for the UNDP about Lebanon 2050 and Climate Change. Originally requested as an infographic, The Council re-imagined the brief. Instead of speaking directly about climate change, the video tackles the danger of losing what the Lebanese value most: Taboulleh.</p>
<a href="#" class="btn btn-default btn-lg slide-button">Explore</a>
</div>
</div>
</div>
</div>
</div>
</section>
CSS
.nav {
position: relative;
}
.nav__item {
line-height: 1;
position: relative;
display: block;
margin: 0;
padding: 0;
letter-spacing: 0;
color: currentColor;
border: 0;
background: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.nav__item:focus {
outline: none;
}
.nav--beca {
position: fixed;
top: 50%;
right: 0;
margin: 0;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
z-index:10;
}
.nav--beca a {
color: currentColor;
text-decoration: none;
}
.nav--beca .nav__item {
width: 5.5em;
height: 2.5em;
}
.nav--beca .nav__item::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 50%;
height: 2px;
margin: -1px 0 0 0;
opacity: 0.5;
background: #000;
-webkit-transform: scale3d(0.5,1,1);
transform: scale3d(0.5,1,1);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}
.nav--beca .nav__item:not(.nav__item--current):focus::before,
.nav--beca .nav__item:not(.nav__item--current):hover::before {
opacity: 1;
-webkit-transform: scale3d(0.75,1,1);
transform: scale3d(0.75,1,1);
}
.nav--beca .nav__item--current::before {
opacity: 1;
-webkit-transform: scale3d(2,1,1);
transform: scale3d(2,1,1);
}
.nav--beca .nav__item-title {
font-size: 1em;
font-weight: bold;
display: block;
overflow: hidden;
margin: -1.15em 0 0 1.6em;
text-align: left;
white-space: nowrap;
pointer-events: none;
margin-left: -40px;
}
.nav--beca .nav__item-title span {
display: block;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}
.nav--beca .nav__item--current .nav__item-title span {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
的Javascript
(function(window) {
'use strict';
function init() {
[].slice.call(document.querySelectorAll('.nav')).forEach(function(nav) {
var navItems = [].slice.call(nav.querySelectorAll('.nav__item')),
itemsTotal = navItems.length,
setCurrent = function(item) {
// return if already current
if(item.classList.contains('nav__item--current')) {
return false;
}
// remove current
var currentItem = nav.querySelector('.nav__item--current');
currentItem.classList.remove('nav__item--current');
// set current
item.classList.add('nav__item--current');
};
navItems.forEach(function(item) {
item.addEventListener('click', function() { setCurrent(item); });
});
});
[].slice.call(document.querySelectorAll('.link-copy')).forEach(function(link) {
link.setAttribute('data-clipboard-text', location.protocol + '//' + location.host + location.pathname + '#' + link.parentNode.id);
new Clipboard(link);
link.addEventListener('click', function() {
link.classList.add('link-copy--animate');
setTimeout(function() {
link.classList.remove('link-copy--animate');
}, 300);
});
});
}
init();
})(window);
你想要做的就是所谓的scrollspy,[https://jsfiddle.net/mekwall/up4nu/](https://jsfiddle.net/mekwall/up4nu/)。 – hungerstar