Изменение nav a.class на горизонтальной прокрутке с помощью jQuery

Question

Я работаю с горизонтальным дизайном, с навигационным меню в верхнем левом углу. Я хочу, чтобы каждая ссылка меняла видимость при прокрутке по горизонтали. Я использовал то же самое для вертикальных scroll-navs без каких-либо проблем. Поэтому я попробовал тот же код, но использовал .scrollLeft(); вместо .scrollTop(); и .position().left вместо .position().top. Любые идеи, как заставить его работать?

Вот jsfiddle с моим кодом: https://jsfiddle.net/5xx6g7j8/2/

Answer 1

Используйте #slideShow, чтобы получить текущую позицию прокрутки элемента и для стрельбы события прокрутки.

Я также добавил удаление класса для навигатора при прокрутке влево.

$('#slideWrap').parent().scroll(function() { 
    var winScroll = $(this).scrollLeft(); 
    $('.slide').each(function (i) { 
     console.log($(this).position().left + " vs " + winScroll); 
     if ($(this).position().left <= winScroll) { 
      $('#crums li a').eq(i).addClass('visited'); 
     } else { 
      $('#crums li a').eq(i).removeClass('visited'); 
     } 
    }); 
}); 

JSFiddle Demo

Answer 2

Вы можете удалить visited класс из пункта, и добавить его в активный слайд (строка 6 + 7):

$(document).ready(function() { 
    //scrollTo 
    $('.nextPage, .prevPage').bind('click',function(event){ 
     var $anchor = $(this); 
     // added the next two lines 
     $('.nextPage, .prevPage').removeClass('visited'); 
     $(this).addClass('visited'); 

     $('#slideShow').stop().animate({ 
      scrollLeft: Math.abs($('#slideWrap').offset().left) + $($anchor.attr('href')).offset().left + 100 
     }, 1500); 
     event.preventDefault(); 
    }); 
    //slide hover-effect   
    $('.nextPage').mouseover(function() { 
     var $target = $(this).attr('href'); 
     $($target).css({ 
      opacity : '0.4', 
      transition : 'opacity 1s ease-in-out' 
     }) 
    }).mouseout(function() { 
     var $target = $(this).attr('href'); 
     $($target).css(
      { 
       opacity : '1', 
       transition : 'opacity 1s ease-in-out' 
      } 
     );   
    }); 


    //This I need help with: 
    $('#slideWrap').scroll(function(){ 
     var winScroll = $(window).scrollLeft(); 
     $('.slide').each(function(i) { 
      if ($(this).position().left <= winScroll) { 
       $('#crums li a').eq(i).addClass('visited'); 
      } 
     }); 
    });  
}); 

Updated Fiddle