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

Question

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

我还有一个导航菜单，显示页面上的幻灯片数量，如果您单击菜单项，该行会滑入 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);

Answer 1

希望我能回答您的问题，这会对您有所帮助。将以下代码添加到您的 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');
});