Newsletter widget that appears on bigger screens and when you clock click on a subscribe button or when you scroll

[Archie22is]

'sup guys! I need some help wth the following setup:

1. Newsletter that appears into place when scrolling down the page
2. The newsletter widget that appears on scroll can be closed
3. BUT once close, and you continue scrolling down the page, it should not reopen

So, my issue is:
The widget appears on scroll and I can close it, however when I continue scrolling it reopens up

Here is my sample script:

// newsletter widget on screens bigger than 680px
    if ($(window).width() > 680 ) {
        $('span.subscribe-btn').click(function(e){
            e.preventDefault();

            $("#newsletter_widget").show("slow")
        });
    }

[m3g4p0p]

You can remove the scroll listener using .off() once that widget is gets shown. BTW, I would suggest not to do the width check inside the handler function, but not to attach the listener in the first place if the width is < 680 – that would be just some unnecessary performance eater otherwise.

[Archie22is]

I am still struggling with this question guys. I have updated the two scripts in the question. Any assistance will be highly appreciated.

//open widget on scroll and close action 
// newsletter widget
$(window).scroll(function(){
    if($(document).scrollTop()>=$(document).height()/5)
        $("#newsletter_widget").show("slow");else $("#newsletter_widget").hide("slow");
});
function closeSPopup(){
    $('#newsletter_widget').hide('slow');
    $(window).off("scroll", scrollHandler);
}

[Archie22is]

Hey guys, anybody to offer a second set of eyes here?

[m3g4p0p]

That closeSPopup() function doesn’t seem to get called anywhere; and within that function, scrollHandler is not defined. Try something like

var $win = $(window)
var $doc = $(document)
var $widget = $('#newsletter_widget')
var $close = $('#my_close_button')

function scrollHandler () {
  if ($doc.scrollTop() >= $doc.height() / 5) {
    $widget.show('slow')
  }
}

$win.scroll(scrollHandler)

$close.click(function () {
  $widget.hide('slow')
  $win.off('scroll', scrollHandler)
})

[Archie22is]

Thank you very much @m3g4p0p