unbind(scroll) stop all codes working with scroll method jquery

Question

I'm working with an scroll method to show an alert (sql code execution) only onces after scrolling down.

 $(window).scroll(function(){
     if($(this).scrollTop()>200){
        alert("Sql executed");
        $(this).unbind("scroll");
 }  
    });

It was working well until I added a show-new-fixed header after scrolling down, the problem is that the header appears but when the alert() apppears, this new header doesnt hide and show the real one.

$(window).scroll(function() {
  if ($(this).scrollTop() > 35) {
    $(".header").hide();
    $(".header_scroll").show();
  } else {
    $(".header_scroll").hide();
    $(".header").show();
  }
    });

I think this is because the .unbind(scroll), So how do I unbind only for the alert and not for the header?

Answer 1

Add an identifier to your scroll function. Then you can unbind that specific function:

$(window).bind("scroll.myScroll", function(){
  if ($(this).scrollTop() > 200) {
    console.log("Sql executed");
    $(this).unbind(".myScroll");
  }
});

$(window).scroll(function() {
  if ($(this).scrollTop() > 35) {
    $(".header").hide();
    $(".header_scroll").show();
  } else {
    $(".header_scroll").hide();
    $(".header").show();
  }
});

html,
body {
  height: 5000px;
}
.header,
.header_scroll {
  position: fixed;
}
.header_scroll {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">header</div>
<div class="header_scroll">header_scroll</div>