How to disable a fade in/out div when a link is clicked

Question

So, I have a newletter signupo box, that fades in and out at a specific position of the page. The signup box also has a button to turn it off. When this is clicked i would like it to not show anymore until the page is reloaded. My assumption would be to assign a disablefade variable and then stop the scroll function to be executed. however, for some reason this doesnt work. When clicked on no thanks and scrolled again, the div will show again...

Thanks for your help!

jQuery(document).ready(function($) {

    $("#nl-pop").hide(); //hide nl block initially
    var disableFade = "false";

    var topOfOthDiv1 = $("#newsletter-cta").offset().top - 1500;
    var topOfOthDiv3 = $("#newsletter-cta").offset().top;

    jQuery('#no-thanks').click(function(event) {
        event.preventDefault();
        jQuery('#nl-pop').fadeOut('slow');
        var disableFade = "true";
    });

    console.log(disableFade);

    if(disableFade === "false")
        {
         $(window).scroll(function() {
            if($(window).scrollTop()  topOfOthDiv1) { //scrolled past the other div?
                    $("#nl-pop").fadeOut(200); //reached the desired point -- show div
                }
            }

        });        
    }

});

Answer 1

The disable fade variable value should be checked inside the scroll function like given below.

$(window).scroll(function() {
        //here you check whether disableFade==="false"
        if($(window).scrollTop().topOfOthDiv1 && disableFade==="false") {
                $("#nl-pop").fadeOut(200);
            }
        }

    });

In the code you have used the condition to check disableFade value outside the scroll function. Also you should not use var everytime when you use a variable.

Answer 2

1: Use the type boolean instead of string. Remove the quotes from the assignment.

var disableFade = true;

2: You doing a new init. of the variable in the scope of the .click trigger. remove the var at the beginning. You want to override the variable, not create a new one.

3: Change you if condition to if(!disableFade)

Answer 3

jQuery(document).ready(function($) {

    $("#nl-pop").hide();
    var disableFade;

    var topOfOthDiv1 = $("#newsletter-cta").offset().top - 1500;
    var topOfOthDiv3 = $("#newsletter-cta").offset().top;

    jQuery('#no-thanks').click(function(event) {
        event.preventDefault();
        jQuery('#nl-pop').fadeOut('slow');
        var disableFade = true;
        return disableFade;
    });

    console.log(disableFade);

    if(disableFade !== true)
        {
         $(window).scroll(function() {
            if($(window).scrollTop().topOfOthDiv1) {
                    $("#nl-pop").fadeOut(200);
                }
            }

        });        
    }

});

A boolean does not require quotations when called.