Question

我有以下JavaScript / jQuery代码。我看不出它有任何问题，但它无法正常工作。

        while (run) {
            if (currentLink.data == num) {
                currentLink.size--;
                if (currentLink == head) {
                    if (head == head.next) { //make sure to handle a case where we are removing head from the list that has only one node
                        head = null;
                        break;
                    } else { //we removed a head, move current head to the new one and set currentLink to the next node from head
                        head = head.next;
                        currentLink = head.next;
                        previousLink = head;
                    }
                } else {
                    previousLink.next = currentLink.next;
                    currentLink = currentLink.next;
                }
            } else { //no match move on to the next node
                previousLink = currentLink;
                currentLink = currentLink.next;
                if (currentLink == head) run = false;
            }
        }

$(document).ready(function(){
    $(window).scroll(function(){
        if($(window).scrollTop() > 0) {
            $("#forumHeader").animate({top: '250px'});
        }
        else
        {
            $("#forumHeader").animate({top: '60px'});
        }
    });
});

#forumHeader
{
    position: absolute;
    top: 60px;
    left: 0%;
    height: 100px;
    width: 200px;
    color: white;
    background-color: red;
}

#content
{
    height: 1000px;
    background-color: gray;
}

我第一次向下滚动它正常工作并且动画#forumHeader顶部：250px。但是当我再次向上滚动时，它可能需要几秒钟才能恢复到顶部：60px。有时它会来回变换，有时可能无法做任何事情。问题是什么？请帮忙..

Answer 1

我会使用jQuery添加和删除一个类，然后使用CSS转换

$(document).ready(function(){

     // EDIT - Move the selector outside of the scroll event as suggested
     var header = $("#forumHeader");

     $(window).scroll(function(){

        if($(window).scrollTop() > 0) {
            header.addClass('slide');
        } else {
            header.removeClass('slide');
        }
    });
});

#forumHeader{
    top: 60px;
    -webkit-transition: top 500ms ease-out ;
    -moz-transition: top 500ms ease-out ;
    -o-transition: top 500ms ease-out ;
    transition: top 500ms ease-out ;
}
#forumHeader.slide{
    top: 250px;
}
#content
{
height: 1000px;
background-color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="forumHeader">Forum Header</div>
<div id="content">Some content here</div>

希望这有帮助

jQuery animate只运行一次，然后开始表现奇怪

1 个答案: