Closing div reopens again after scrolling

Question

I'm making a div appear after another div has scrolled out of view, but the first div has a close button which hides the div. However, when the page is scrolled, the first code fires and reopens the div again.

var element = $("#request-consultation").offset().top + $("#request-consultation").outerHeight();
$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= element) {
    $("#request-consultation-float").show('slow');
  } else {
    $("#request-consultation-float").hide('slow');
  }
});

$(".request-float-close span").click(function() {       
    $('#request-consultation-float').hide('slow');
});

How can I make the #request-consultation-float div stay hidden after the .request-float-close has been clicked?

You need to remove the `$(window).scroll(...)` event listener in `$('req span').click(...)`. — rgajrawala, Sep 07 '15 at 12:15
Add a `data-attribute` to your div, and when you the user clicks to close the div simply add a value to the `data-attribute` and then use that to check in your if statement. The problem you are having is when you scroll your `if` statement is returning true so you need to add another condition — Canvas, Sep 07 '15 at 12:16

score 0 · Answer 1 · answered Sep 07 '15 at 12:15

You may use a flag variable to check if it is clicked or not like this:

var isClicked = false;
var element = $("#request-consultation").offset().top + $("#request-consultation").outerHeight();
$(window).scroll(function() {
    if(isClicked) return;
  var scroll = $(window).scrollTop();
  if (scroll >= element) {
    $("#request-consultation-float").show('slow');
  } else {
    $("#request-consultation-float").hide('slow');
  }
});

$(".request-float-close span").click(function() {       
    $('#request-consultation-float').hide('slow');
    isClicked = true;
});

score 0 · Accepted Answer · answered Sep 07 '15 at 12:17

You can remember the click and behave according to that:

var element = $("#request-consultation").offset().top + $("#request-consultation").outerHeight();
var closeClicked = false;
$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= element && !closeClicked) {
    $("#request-consultation-float").show('slow');
  } else {
    $("#request-consultation-float").hide('slow');
  }
});

$(".request-float-close span").click(function() {       
    $('#request-consultation-float').hide('slow');
    closeClicked = true;
});

score 0 · Answer 3 · edited May 23 '17 at 12:29

Remove the specific event handler:

var element = $("#request-consultation").offset().top + $("#request-consultation").outerHeight();

function myCustomScroll() {
    var scroll = $(window).scrollTop();
    if (scroll >= element) {
        $("#request-consultation-float").show('slow');
    } else {
        $("#request-consultation-float").hide('slow');
    }
}

$(window).scroll(myCustomScroll);

$(".request-float-close span").click(function() {       
    $('#request-consultation-float').hide('slow');
    $(window).unbind('scroll', myCustomScroll);
});

If you don't want to keep a reference to the listener function, you can use namespacing:

var element = $("#request-consultation").offset().top + $("#request-consultation").outerHeight();

$(window).on('scroll.consultationFloat', function() {
    var scroll = $(window).scrollTop();
    if (scroll >= element) {
        $("#request-consultation-float").show('slow');
    } else {
        $("#request-consultation-float").hide('slow');
    }
});

$(".request-float-close span").click(function() {       
    $('#request-consultation-float').hide('slow');
    $(window).unbind('scroll.consultationFloat');
});

But what happens if he wants to rebind it at a later date? He shouldn't have to unbind and bind event listeners — Canvas, Sep 07 '15 at 12:24
@Canvas That is true, this is just one way to achieve the functionality the OP wants. — rgajrawala, Sep 07 '15 at 12:42

Closing div reopens again after scrolling

3 Answers3