gpt4 book ai didi

javascript - 滚动更改菜单的当前元素

转载 作者:行者123 更新时间:2023-11-28 15:31:30 27 4
gpt4 key购买 nike

我有一个包含多行的页面,每行包含一个背景图像(封面),上面有一些内容,如幻灯片。

我还有一个导航菜单,显示页面上的幻灯片数量,如果您单击菜单项,该行会滑入 View 。

问题是,当我手动滚动并移动到特定行时,菜单保持不变,显示它仍在第一行/幻灯片上。

我需要能够在滚动时动态更改导航菜单的当前项,目前它在您单击菜单项而不是滚动时有效。

每当我滚动到行/幻灯片时,只需切换类 nav__item--current

演示 https://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);

最佳答案

希望我能回答您的问题,这会对您有所帮助。将以下代码添加到您的 document.ready 函数 () 中。

 var id_ele;
$(".container-fluid .row").hover(function(){
id_ele = '';
id_ele = $(this).attr('id');
id_ele = '#' + id_ele;
$('.nav--beca').find("a[href*='"+id_ele + "']").addClass('nav__item--current');
}, function(){
$('.nav--beca').find("a[href*='"+id_ele + "']").removeClass('nav__item--current');
});

关于javascript - 滚动更改菜单的当前元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44632507/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com