jquery - 用于更改特定幻灯片颜色的视差导航菜单

Question

我正在构建一个视差网站，我希望我的父级导航及其子级在特定幻灯片上更改颜色以便可见。我应该在 jQuery 中使用什么代码来实现这一点？

这是我的 CSS、标记和代码:

.navigation{
    font-family:thin lines and curves;
    position:fixed;
    text-align:center;
    letter-spacing:1px;
    z-index:51;
    top:50%;
    left:6%;
}

.navigation li{
    font-family:thin lines and curves;
    color:#fff;
    display:block;
    letter-spacing:2px;
    padding:0 10px;
    line-height:30px;
    margin-bottom:2px;
    margin-left:auto;
    margin-right:auto;
    -webkit-transition: all .2s ease-in-out;
}
.navigation li:hover,
.active{
    font-family:thin lines and curves;
    cursor:pointer;
    text-decoration:underline;
}

.navigation2{
    font-family:thin lines and curves;                                   /*EC2127 - red color tone of logo*/
    position:fixed;
    text-align:right;
    letter-spacing:1px;
    top:50%; 
    left:88%;
    z-index:51;
    }
.navigation2 li{
    font-family:thin lines and curves;
    color:#fff;
    display:block;
    letter-spacing:2px;
    padding:0 10px;
    line-height:30px;
    margin-bottom:2px;
    margin-left:auto;
    margin-right:auto;
    -webkit-transition: all .2s ease-in-out;
}
.navigation2 li:hover,.active{
    font-family:thin lines and curves;
    cursor:pointer;
    text-decoration:underline;







<ul class="navigation">
    <li data-slide="1"><img class="geshalogo" src="images/geshalogo.png"></li>
        <li data-slide="2">estate
                <ul class="navigation2">
                <li data-slide="2">land</li>
                <li data-slide="3">varietal</li>
                <li data-slide="4">people</li>
                <li data-slide="6">practices</li>
                <li data-slide="9">future offerings</li>
                </ul>
        </li>
        <li data-slide="10">about</li>
        <li data-slide="13">location</li>
        <li data-slide="14">contact</li>
    </ul>







jQuery(document).ready(function ($) {


    //initialise Stellar.js
    $(window).stellar();

    //Cache some variables

    var links = $('.navigation').find('li');
    var link = $('.navigation2').find('li'); // informs to cache a second set of navigation and sets it to play
    slide = $('.slide');
    button = $('.button');
    mywindow = $(window);
    htmlbody = $('html,body');


    //Setup waypoints plugin

    slide.waypoint(function (event, direction) {

        //cache the variable of the data-slide attribute associated with each slide

        dataslide = $(this).attr('data-slide');

        //If the user scrolls up change the navigation link that has the same data-slide attribute as the slide to active and 
        //remove the active class from the previous navigation link

        if (direction === 'down') {
            $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
        }
                // else If the user scrolls down change the navigation link that has the same data-slide attribute as the slide to active and 
        //remove the active class from the next navigation link

        else {
            $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
        }
        // same as the aboove for the second set of navigations

        if (direction === 'down') {
           $('.navigation2 li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');
        }
        else {
           $('.navigation2 li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');
       }

    });

    //waypoints doesnt detect the first slide when user scrolls back up to the top so we add this little bit of code, that removes the class 
    //from navigation link slide 2 and adds it to navigation link slide 1.

    mywindow.scroll(function () {
        if (mywindow.scrollTop() == 0) {
            $('.navigation li[data-slide="1"]').addClass('active');
            $('.navigation li[data-slide="2"]').removeClass('active');
        }
    });

    mywindow.scroll(function () {
        if (mywindow.scrollTop() == 0) {
            $('.navigation2 li[data-slide="1"]').addClass('active');
            $('.navigation2 li[data-slide="2"]').removeClass('active');
        }
    });

    //Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery
    //easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin.

    function goToByScroll(dataslide) {
        htmlbody.animate({
            scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
        }, 2000, 'easeInOutQuint');
    }

    //When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function

    links.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        goToByScroll(dataslide);
    });

    //When the user clicks on the button, get the get the data-slide attribute value of the button and pass that variable to the goToByScroll function

    button.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        goToByScroll(dataslide);

    });

    $('.navigation2').hide(); //Hide children by default

    $('.navigation').children().click(function(){
    $(this).siblings().children('.navigation2').hide();
    $(this).children('.navigation2').slideToggle(2000, 'easeInOutQuint');     
    }).children('.navigation2').click(function (event) {
        event.stopPropagation();
    });


    });

Answer 1

关于代码的编写方式，只需要做一件事即可根据当前事件幻灯片应用不同的颜色。

首先声明一个对象数组，代表您需要的每张幻灯片的视觉设置:

var slideSettings = [
   { 'links': '#AAA', 'background': '#FFF', 'image': 'http://url-to-an-image1.png' },
   { 'links': '#BBB', 'background': '#FFF', 'image': 'http://url-to-an-image2.png' }
   // add more colors here ...
];

之后，每当用户更改当前幻灯片(向上或向下滚动)时，您将把当前幻灯片设置应用到需要更改的导航元素。

// ... whenever the user changes the current slide
$('.navigation li').css('color', slideSettings[dataslide].links);
$('.navigation li').css('background-color', slideSettings[dataslide].background);
$('.navigation li img').attr('src', slideSettings[dataslide].image);
// ... continue with the rest ...