Search code examples
jqueryscrollshow-hidefadeinfadeout

Jquery Show and hide banner on scroll

I'm trying to show a banner scrolling over 1000px. So, it works but I need to open and close it only one time.

Here my complete demo

This is my .js

    $(window).scroll(function () {
        if ($(this).scrollTop() > 1000) {
    $("#banner-promo").fadeIn("slow", function () {});

        }

       else {
            //  $('#BackToTop').css({'visibility': 'hidden'});
            $("#banner-promo").fadeOut("slow", function () {});
        }
  $("#chiudi").click(function(){
    $("#banner-promo").fadeOut("slow");
});
});

What's the best practice to do that?

Thanks in advance

Solution

  • Based on the comments, the answer you went with was to make use of remove() to take the element away versus hiding it.

    For example: https://jsfiddle.net/Twisty/0go8snsL/

    $("#banner-promo").remove();