JQUERY scrollTo执行后不会让我滚动

Question

Im using the following JQUERY to hide an element upon scroll and then scroll back to the top of the page to display the new element:

$(window).bind('scroll', function() {
 if ($(window).scrollTop() > 200) {
 }
 else {
    $("#hero-area").slideUp(1300);
    $(".timeline").show(2000);
    $("body").animate({ scrollTop: 0 }, "slow");
 return false;
 }
});

Problem is, it scrolls back to the top of the page just fine but after execution it refuses to let me continue scrolling the page. I have tried returning false, but no luck. Maybe because im using an IF statement?

Answer 1

--Update-- One approach to your question, load once is to set a global variable and check it before you run it like so...

    var canRun = true; //declare a global variable
    $(function () { //on page load
        $(window).bind('scroll', function () {
            if ($(window).scrollTop() > 200) {
                if (canRun) {
                    //Do your animation
                    //set the global to false
                    canRun = !canRun;
                }
            }
        });
    });

---

If $(window).scrollTop() = 0 it would go to the else block and then try to scroll up again.Just looooooooping.

If you want to play with the "#hero-area" element after passing 200 then you want to get rid of your else block, take that code put it inside if and not worry about the rest.

Hope that helps. If that didn't answer your question let me know.