Question

我发现自己遇到了一个问题，我认为这个问题有一个简单的解决方案，但是我看不到......我有两个函数可以添加一个名为selected的类来突出显示按钮。

一个函数删除所选的类（如果存在），并将该类添加到单击的按钮：

var sidebarLinks = $('.js-sidebar a');

    // About section: Remove and add class on click
    sidebarLinks.on('click', function() {
        sidebarLinks.removeClass('selected');
        $(this).addClass('selected');
    });

如果用户决定滚动而不是单击按钮，则另一个函数会添加所选的类。这些按钮将突出显示页面的确定偏移量：

    var buttonOne = $('.buttonOne');
    var buttonTwo = $('.buttonTwo');
    var buttonThree = $('.buttonThree');


// Select nav buttons if scrolling and not clicking the button
    $(window).scroll(function () {

        // About nav sidebar links
        var buttonOne = $('.js-polspotten-sidebar');
        var buttonTwo = $('.js-product-sidebar');
        var buttonThree = $('.js-designers-sidebar');

        // About sections top scroll position
        var currentTopPosition = $(this).scrollTop();
        var productsTopPosition = $('#products').offset().top;
        var designersTopPosition = $('#designers').offset().top;


        // polspotten selected depending on scroll position
        if (currentTopPosition >= currentTopPosition && currentTopPosition < productsTopPosition) {
            buttonOne.addClass('selected');
        }
        else{
            buttonOne.removeClass('selected');
        }

        // products selected depending on scroll position
        if (currentTopPosition >= productsTopPosition &&
            currentTopPosition < designersTopPosition) {
            buttonTwo.addClass('selected');
        }
        else{
            buttonTwo.removeClass('selected');
        }

        // designers selected depending on scroll position
        if (currentTopPosition >= designersTopPosition) {
            buttonThree.addClass('selected');
        }
        else{
            buttonThree.removeClass('selected');
        }

    });

问题是两者都在click事件创建滚动的同时进行交互。

我想要的是，如果有人点击按钮，滚动功能将无效。只有当用户滚动自己时它才会起作用。

这可能吗？

点击addClass选中，在滚动时覆盖addClass

0 个答案: