CODEWITHSUNDEEP
javascriptjqueryhtmlscrollto
Meowls
Meowls

Reputation: 59

JQUERY scrollTo won't let me scroll after executed

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?

Upvotes: 0

Views: 725

Answers (1)

Searching
Searching

Reputation: 2279

--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.

Upvotes: 1

Related Questions