Disable/Enable button for a function doesn't work

Question

The function animateIt changes the div text color on scroll and I want the div#disable to stop this function until I click the div#enable. As you see I wrote this code but the #disable part doesn't work so please check it and let me know what is wrong.

var enable = true;

$('#enable').on('click', function() {
  if (!enable) {
    enable = true;
    animateIt(); // call again after enabled...
  }
});
$('#disable').click(function () {
  enable = false;
  $('#disable').css('background','blue');
});

function animateIt() {
if (!enable) return;
$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    if ( scroll > 0 && scroll < 1000) {
		$('.position').css({
'color':'red))',
'background':'rgba(0,40,90,1.00)'
			})
		$('.position2').css({
'color':'rgba(255,248,0,1.00)',
			})
		$('.position3').css({
'color':'rgba(255,0,215,1.00)',
			})
		}
   if ( scroll > 1000 && scroll < 2000) {
		$('.position').css({
'color':'green',
'background':'rgba(255,0,144,1.00)'
			})
		$('.position2').css({
'color':'rgba(0,100,206,1.00)',
			})
		$('.position3').css({
'color':'rgba(0,255,7,1.00)',
			})
		}
   if ( scroll > 2000 && scroll < 3000) {
		$('.position').css({
'color':'yellow',
'background':'rgba(255,0,226,1.00)'
			})
		$('.position2').css({
'color':'rgba(155,0,255,1.00)',
			})
		$('.position3').css({
'color':'rgba(224,224,224,1.00)',
			})
		}
	
    if ( scroll > 3000 && scroll < 4000) {
		$('.position').css({
'color':'orange',
'background':'rgba(255,2,6,1.00)'
			})
		$('.position2').css({
'color':'rgba(69,66,179,1.00)',
			})
		$('.position3').css({
'color':'rgba(124,141,245,1.0)',
			})
		}
    if ( scroll > 4000 && scroll < 5000) {
		$('.position').css({
'color':'rgba(0,94,255,1.00)',
'background':'rgba(255,0,226,1.00)'
			})
		$('.position2').css({
'color':'rgba(224,224,224,1.00)',
			})
		$('.position3').css({
'color':'rgba(155,0,255,1.00)',
			})
		}
	if ( scroll > 5000 && scroll < 6000) {
		$('.position').css({
'color':'cyan',
'background':'rgba(255,238,0,1.00)',
'text-shadow':'none'
			})
		$('.position2').css({
'color':'rgba(176,50,0,1.0)',
			})
		$('.position3').css({
'color':'rgba(100,16,5,1.00)',
			})
		}
	if ( scroll > 5000 && scroll < 6000) {
		$('.position').css({
'color':'blue',
'background':'rgba(243,255,217,1.00)',
			})
		$('.position2').css({
'color':'rgba(136,168,191,1.0)',
			})
		$('.position3').css({
'color':'rgba(68,47,168,1.0)',
			})
		}
var color=$('.position').css('color');
$('#p1color').html(color); 
var color=$('.position2').css('color');
$('#p2color').html(color);
var color=$('.position3').css('color');
$('#p3color').html(color);
  
		});
}
animateIt();

body{text-align:center; height:10000px;}
#disable{width:50px; height:50px; position:fixed; float:right; background:red;}
.position{
color:rgba(0,255,65,1.00);
background:rgba(0,40,90,1.00);
font-weight:900; 
font-size:12px;
font-family:mono; 
margin-top:0;
overflow:hidden;
display:inline-block;
margin-top:40px;
position:fixed;

}
.position2{
color:rgba(255,0,215,1.00);
font-weight:900; 
font-size:12px;
font-family:mono; 
margin-top:0;
overflow:hidden;
display:inline-block;
margin-top:20px;
  position:fixed;
}
.position3{
color:rgba(255,248,0,1.00);
font-weight:900; 
font-size:12px;
font-family:mono; 
margin-top:0;
overflow:hidden;
display:inline-block;
margin-top:60px;
position:fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="disable">
</div>
<div class="position">
  A
  </div>
<div class="position2">
  B
  </div>
<div class="position3">
  C
  </div>

Answer 1

The problem lies within setting a function bound to the scroll event (e.g. $(window).scroll(function(event) {}) ) when that function is bound, its bound. The function will fire from then on when you scroll, and every time you call animate, you're just rebinding the function if enable is true. What you need to do, is put the enable variable in your function that is bound to the scroll event.

$(window).scroll(function(event) {
    if (!enable) return;
    // otherwise do fancy color stuff
});

so you can simplify javascript to

 var enable = true;

 $('#enable').click(function() {
      enable = true;
 });

 $('#disable').click(function() {
      enable = false;
 });

 $(window).scroll(function(event) {
    if (!enable) return;
    // rest of code
 }

hope that helps!