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