javascript - 在滚动时显示/隐藏 div

Question

滚动后，我需要在 2200 像素上显示我的 div（页脚导航），然后在 2800 像素上再次隐藏它。

我的代码在初始部分一切都很好，所以我的元素在 2200px 之后显示并在鼠标两秒钟不动时隐藏，

但我也想在达到 2800px 滚动时完全隐藏我的 div。

看看我的片段，每次我向上或向下滚动窗口时触发事件会很棒：

$(window).scroll(function(event) {
function footer()
{
    var scroll = $(window).scrollTop(); 
    if(scroll > 2200)
    { 
        $(".footer-nav").fadeIn("slow").addClass("show");
    }
    else
    {
        $(".footer-nav").fadeOut("slow").removeClass("show");
    }

    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        if ($('.footer-nav').is(':hover')) {
            footer();
        }


        else
        {
            $(".footer-nav").fadeOut("slow");
        }
    }, 2000));
}
footer();});

提前致谢！

标签： javascripthtmlcss

Answer 1

尝试使用以下代码：

$(window).scroll(function(event) {
function footer()
{
    var scroll = $(window).scrollTop(); 
    if(scroll > 2200 && scroll < 2800)   <-- this line
    { 
        $(".footer-nav").fadeIn("slow").addClass("show");
    }
    else
    {
        $(".footer-nav").fadeOut("slow").removeClass("show");
    }

    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        if ($('.footer-nav').is(':hover')) {
            footer();
        }
        else
        {
            $(".footer-nav").fadeOut("slow");
        }
    }, 2000));
}
footer();});