CODEWITHSUNDEEP
javascriptjquery
dericcain
dericcain

Reputation: 2290

Using variable to control an event

I have a footer popup that shows when the page is scrolled a certain amount. I have a little x that the user can click to make the footer go away. I am trying to use a variable to make the footer stay hidden when the x is clicked. I am not able to get it to work like I want and I want to understand why. Here is the code:

jQuery(function($) {
    $(document).scroll(function(){
        var position = $(this).scrollTop();
        var fired = 0;

        if(position < 360 && fired === 0){
            $('#popup').slideUp();
        } else {
            $('#popup').slideDown();
        }

        $('.close').on('click', function(){
            $('#popup').slideUp();
            fired = 1; // I thought that this was suppose to override the current variable
        });
    });

});

So, why does this not work?

Upvotes: 0

Views: 28

Answers (2)

Travis J
Travis J

Reputation: 82287

Fired is a local variable to the scroll callback and as a result is always 0. Place it outside of the callback and it will remain once set.

jQuery(function($) {
 var fired = 0;
 $(document).scroll(function(){
    var position = $(this).scrollTop();
 //...

Upvotes: 0

matthias_h
matthias_h

Reputation: 11416

It doesn't work because you declared var fired = 0; inside the scroll function. So whenever the user scrolls, fired is set to 0. Just declare it above the scroll-function, then it should work.

Upvotes: 2

Related Questions