私は、ページをスクロールするときに表示したいボタンがいくつかあり、アンカーをクリックしたときにscrollTo.jsを使ってスクロールをアニメーション化しました。jQuery addClassが高速にスクロールするときに機能しない
ボタンを表示して非表示にするには、単純にクラス '非表示'を追加して削除します。
長距離を一度にスクロールしない限り、すべてうまく動作します:これを行うと、ページの上部までの距離が短くなると「隠し」クラスが追加されることがわかります282pxが表示されますが、その直後にこのクラスは再び削除され、ボタンは表示されたままになります。ちょっとスクロールすると、クラスが正しく追加されます。
この現象の原因は何ですか?
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>
Codepen: http://codepen.io/Gwouten/pen/LRBzbo