jqueryunbind

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


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?


Solution

  • 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>