jQuery addClass가 최상위로 스크롤 할 때 작동하지 않습니다.

페이지를 스크롤 할 때 표시 할 버튼이 몇 개 있으며, 앵커를 클릭 할 때 스크롤 할 때 애니메이션을 적용하기 위해 scrollTo.js를 사용했습니다.jQuery addClass가 최상위로 스크롤 할 때 작동하지 않습니다.

버튼을 표시하거나 숨기려면 '숨겨진'클래스를 추가 및 제거하기 만하면됩니다.

장거리를 한 번에 스크롤하지 않는 한 모든 것이 잘 작동합니다. 이렇게하면 페이지 상단까지의 거리가 짧아지면서 클래스 '숨김'이 추가됩니다. 282 픽셀이지만 바로 그 후에이 클래스가 다시 제거되어 버튼이 표시됩니다. 그런 다음 조금만 스크롤하면 클래스가 올바르게 다시 추가됩니다.

이 문제의 원인은 무엇입니까?

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>

Codepen : http://codepen.io/Gwouten/pen/LRBzbo

출처

2016-10-14 Gwouten

귀하의 setTimeouts 오 서로 버렸다. 나는 당신이 그들을 제거하거나 같은 요소에 다른 뭔가를 실행하기 전에 활성 타임 아웃을 감지하는 코드를 스마트하게해야한다고 생각 :

클래스를 제거 한 다음 빠르게 스크롤 할 때 다시 추가 http://codepen.io/anon/pen/ALgQPN

및 하위.

출처

2016-10-14 13:27:52 Ted

jQuery addClass가 최상위로 스크롤 할 때 작동하지 않습니다.

답변

관련 문제