Меню навигации Parallax для изменения цветов на определенных слайдах

Question

Я создаю сайт parallax, и я хотел, чтобы моя родительская навигация и его ребенок меняли цвет на определенных слайдах, чтобы быть видимыми. Какой код следует использовать в 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 ...