使用 jQuery 在水平滚动条上更改导航 a.class

Question

我正在使用水平设计，左上角有一个导航菜单。我希望每个 link 在水平滚动时改变外观。我对垂直滚动导航使用了同样的东西，没有任何问题。所以我尝试了相同的代码，但使用 .scrollLeft(); 而不是 .scrollTop(); 和 .position().left 而不是 .position().top。有什么想法可以让它发挥作用吗？

这是我的代码的 jsfiddle： https://jsfiddle.net/5xx6g7j8/2/

Answer 1

使用#slideShow获取元素的当前滚动位置并触发滚动事件。

我还添加了向左滚动时移除导航的 class。

$('#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 class，并将其添加到活动幻灯片（第 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

使用 jQuery 在水平滚动条上更改导航 a.class

Change nav a.class on horizontal scroll with jQuery

html

css

jquery

scroll

addclass