Question

I have a page with multiple rows, each row contains a background image (cover) with some content on top of it, like a slideshow.

I also have a navigation menu that displays the number of slides on the page and if you click on menu item, the row slides into view.

The problem is, when I scroll and move manually to a specific row, the menu remains the same, displaying that it is still on the first row/slide.

I need to be able to change the navigation menu's current item dynamically when I scroll as well, at the moment it works when you click on the menu items but not on scroll.

Simply toggling the class nav__item--current whenever I scroll to row/slide.

DEMO 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 function（）。

Promise.all

Change menu's current item on scroll

1 个答案:

Change menu&#39;s current item on scroll

1 个答案:

Change menu's current item on scroll