Question

我有一个自动隐藏标题，它会向下滚动并在向上滚动时再次显示。我还有两个导航箭头，可以让你在各个部分之间上下移动。但问题是，当单击向上箭头时，菜单会显示，因为站点向上滚动。所以我想弄清楚，但不是真的可以，是如何防止在单击向上箭头时调用自动隐藏功能。

这是触发隐藏功能的原因，如果我们在点击向上箭头时向上滚动，我不想触发它：

//set scrolling variables
var scrolling = false,
    previousTop = 0,
    currentTop = 0,
    scrollDelta = 10,
    scrollOffset = 150;

$(window).on('scroll', function(){
    if( !scrolling ) {
        scrolling = true;
        (!window.requestAnimationFrame)
            ? setTimeout(autoHideHeader, 250)
            : requestAnimationFrame(autoHideHeader);

    }
});

这是箭头代码：

var sections = $('.panel-section');
console.log(sections);
var i =0;
var scrolto = 0;

function next(){

    if(i == 0){
        $('.prev-section').show();
    }
    if(i < sections.length -1){
        i++;
        if(i == sections.length -1){
            $('.next-section').hide();
        }
        $('html, body').animate({
            scrollTop: sections[i].offsetTop
        }, 2000);
    }else{
        alert('end reached');
    }
}
function prev(){
    if(i == sections.length -1){
        $('.next-section').show();
    }
    if(i > 0){
        i--;
        if(i == 0){
            $('.prev-section').hide();
        }
        $('html, body').animate({
            scrollTop: sections[i].offsetTop
        }, 2000);
    }
}
$('html').keydown(function(e){
    if(e.which == '38'){
        prev();
    }
    if(e.which == '40'){
        next();
    }
});
$('.next-section').click(function(e){
    e.preventDefault();
    next();
});

$('.prev-section').click(function(e){
    e.preventDefault();
    prev();
});

我认为这是唯一相关的代码，但我可能错了，如果是这样，我可以提供更多。

Answer 1

由于单击按钮而在滚动时设置变量，如果该变量为真，则不显示标题

var prevSectionClick = false;
$(window).on('scroll', function(){
    if( !scrolling && !prevSectionClick) {
        scrolling = true;
        (!window.requestAnimationFrame)
            ? setTimeout(autoHideHeader, 250)
            : requestAnimationFrame(autoHideHeader);

    }
});
$('.prev-section').click(function(e){
    e.preventDefault();
    prevSectionClick=true;
    prev();
    prevSectionClick=false;
});

只要你的prev（）函数保持同步，这就行了。否则，你将不得不处理你在函数

中引入的2秒动画

............

来自评论：

$('.prev-section').click(function(e){
    e.preventDefault();
    prevSectionClick=true;
    prev();
});

function prev(){
    if(i == sections.length -1){
        $('.next-section').show();
    }
    if(i > 0){
        i--;
        if(i == 0){
            $('.prev-section').hide();
        }
        $('html, body').animate({
            scrollTop: sections[i].offsetTop
        }, 2000, function() {
            prevSectionClick=false;
        });
    }
    else prevSectionClick=false;
}

防止单击时触发滚动功能

1 个答案: