jQuery addClass 在快速滚动到顶部时不起作用

Question

我想在页面上向下滚动时显示一些按钮，并且我已经使用 scrollTo.js 在单击锚点时设置滚动动画。

为了显示和隐藏按钮，我只是添加和删除了 class 'hidden'。

一切正常，除非您一次滚动很长一段距离到顶部：当我这样做时，我可以看到 class 'hidden'页面顶部小于 282px，但紧接着这个 class 再次被删除，使按钮可见。如果我再滚动一点，就会再次正确添加 class。

是什么导致了这种行为？

JS

var $nav = $('nav');
var $content = $('#content');
var $toTop = $('#to-top');

function scrollWindow(){
    var scrollTop = $(window).scrollTop();
    console.log(scrollTop);
    if (scrollTop > 282) {
        $nav.addClass('minimalized');
        $content.css('padding-top', $nav.height()+'px');
        showButtons();
    } else {
        $nav.removeClass('minimalized');
        $content.css('padding-top', '0px');
        hideButtons();
    }
}

function showButtons() {
    console.log('showing buttons');
    setTimeout(function(){
        $('#dutch').removeClass('hidden');
        $('#fixed-logo').removeClass('hidden');
    }, 300);
    setTimeout(function(){
        $('#english').removeClass('hidden');
    }, 400);
    setTimeout(function(){
        $('#to-top').removeClass('hidden');
    }, 500);
}

function hideButtons() {
    console.log('hiding buttons');
    $('#fixed-logo').addClass('hidden');
    $('#dutch').addClass('hidden');
    $('#english').addClass('hidden');
    //$('#to-top').addClass('hidden');
}

$(window).scroll(scrollWindow);

$toTop.click(function(event){
    event.preventDefault();
    $.scrollTo(0,500);
    hideButtons();
});

$('nav ul li:nth-child(2) a').click(function(event){
    event.preventDefault();
    var target = $('#references').offset().top - 80;
    $.scrollTo(target,500);
});

$('nav ul li:nth-child(3) a').click(function(event){
    event.preventDefault();
    var target = $('#contact').offset().top - 80;
    $.scrollTo(target,500);
});

SCSS

#to-top, #dutch, #english{
    width: 26px;
    height: 21px;
    position: fixed;
    border: 1px solid #559f99;
    text-align: center;
    text-decoration: none;
    top: 240px;
    right: 15%;
    padding: 1rem;
    border-radius: 50%;
    transition: all 0.3s;
    padding-top: 19px;
    text-transform: uppercase;
    font-family: $abel;
    font-size: 1.2rem;
    color: $bluegreen;
    background: none;
    &:hover{
        color: $white;
        background: $bluegreen;
        transition: all 0.3s;
    }
    &.hidden{
        right: -100px;
        transition: right 0.6s;
    }
}
#dutch{
    top: 100px;
    &.hidden{
        right: -100px;
        transition: right 0.6s;
    }
}
#english{
    top: 170px;
    &.hidden{
        right: -100px;
        transition: right 0.6s;
    }
}

HTML

<a id="dutch" class="hidden" href="#">NL</a>
<a id="english" class="hidden" href="#">EN</a>
<a id="to-top" class="hidden" href="#top">Top</a>

代码笔： http://codepen.io/Gwouten/pen/LRBzbo

Answer 1

您的 setTimeouts 相互重叠。我认为您应该删除它们或使您的代码更智能以在尝试对同一元素执行不同的操作之前检测活动超时：

http://codepen.io/anon/pen/ALgQPN

当您快速向上和向下滚动时，class 被删除并再次添加。

jQuery addClass 在快速滚动到顶部时不起作用

jQuery addClass is not working when scrolling to top fast

jquery

scrollto