功能的禁用/启用按钮不起作用

Question

函数animateIt在滚动时更改div文本颜色，我想div＃disable停止此功能，直到我单击div #enable。如你所见，我写了这段代码，但#disable部分没有用，所以请检查一下，让我知道出了什么问题。

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

问题在于设置一个绑定到滚动事件的函数（例如$(window).scroll(function(event) {})），当该函数被绑定时，它的绑定。滚动时，该函数将从此触发，每次调用animate时，如果enable为true，则只是重新绑定该函数。你需要做的是将enable变量放在你的函数中，该变量绑定到scroll事件。

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

所以你可以简化javascript到

 var enable = true;

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

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

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

希望有所帮助！