Question

我正在制作一个动画Sticky Header。在某个点下方滚动后，标题应从顶部滑入并保持固定，直到您向上滚动到该点之上。

这是jsfiddle，如果删除对slideUP的注释，它可以正常工作。

HTML：

<div class="nav-container">
    <div class="nav">
        <div id="bad"> </div>
    </div>
</div>
<p> long content here </p>

CSS：

.f-nav{
     z-index: 9999;
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
}

#bad{
     width: 100%;
     height: 50px;
     background-color: yellow;
}

JS：

var nav=$('.nav-container');
$(window).scroll(function(){
    if($(this).scrollTop() > 200) {
        nav.addClass('f-nav');
        nav.slideDown('slow');
        $('#bad').css('background-color','red');
    } else {
        nav.removeClass('f-nav');
        //nav.slideUp('slow');
        $('#bad').css('background-color','yellow');
    }
});

为什么会这样？

Answer 1

jQuery slideDown旨在处理隐藏的元素。如果元素已经可见，您将看不到效果。要解决此问题，请在.hide()之前的元素上添加.slideDown。像这样：http://jsfiddle.net/Dk8UA/3/

添加.slideUp时它起作用的原因是slideUp隐藏了元素。

更新的您可以添加一个if条件来检查导航是否已经拥有该类，以避免每次滚动时都执行动画。

var nav = $('.nav-container');
$(window).scroll(function () {
    if ($(this).scrollTop() > 200) {
        if (!nav.hasClass('f-nav')) {
            nav.addClass("f-nav");
            nav.hide();
            nav.slideDown("slow");
            $('#bad').css('background-color', 'red');
        }
    } else {
        nav.removeClass("f-nav");
        // nav.slideUp("slow");
        $('#bad').css('background-color', 'yellow');
    }
});

http://jsfiddle.net/Dk8UA/13/

没有slideUP，jQuery slideDown无法正常工作

1 个答案: