函数的禁用/启用按钮不起作用

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) { 
 
\t \t $('.position').css({ 
 
'color':'red))', 
 
'background':'rgba(0,40,90,1.00)' 
 
\t \t \t }) 
 
\t \t $('.position2').css({ 
 
'color':'rgba(255,248,0,1.00)', 
 
\t \t \t }) 
 
\t \t $('.position3').css({ 
 
'color':'rgba(255,0,215,1.00)', 
 
\t \t \t }) 
 
\t \t } 
 
    if (scroll > 1000 && scroll < 2000) { 
 
\t \t $('.position').css({ 
 
'color':'green', 
 
'background':'rgba(255,0,144,1.00)' 
 
\t \t \t }) 
 
\t \t $('.position2').css({ 
 
'color':'rgba(0,100,206,1.00)', 
 
\t \t \t }) 
 
\t \t $('.position3').css({ 
 
'color':'rgba(0,255,7,1.00)', 
 
\t \t \t }) 
 
\t \t } 
 
    if (scroll > 2000 && scroll < 3000) { 
 
\t \t $('.position').css({ 
 
'color':'yellow', 
 
'background':'rgba(255,0,226,1.00)' 
 
\t \t \t }) 
 
\t \t $('.position2').css({ 
 
'color':'rgba(155,0,255,1.00)', 
 
\t \t \t }) 
 
\t \t $('.position3').css({ 
 
'color':'rgba(224,224,224,1.00)', 
 
\t \t \t }) 
 
\t \t } 
 
\t 
 
    if (scroll > 3000 && scroll < 4000) { 
 
\t \t $('.position').css({ 
 
'color':'orange', 
 
'background':'rgba(255,2,6,1.00)' 
 
\t \t \t }) 
 
\t \t $('.position2').css({ 
 
'color':'rgba(69,66,179,1.00)', 
 
\t \t \t }) 
 
\t \t $('.position3').css({ 
 
'color':'rgba(124,141,245,1.0)', 
 
\t \t \t }) 
 
\t \t } 
 
    if (scroll > 4000 && scroll < 5000) { 
 
\t \t $('.position').css({ 
 
'color':'rgba(0,94,255,1.00)', 
 
'background':'rgba(255,0,226,1.00)' 
 
\t \t \t }) 
 
\t \t $('.position2').css({ 
 
'color':'rgba(224,224,224,1.00)', 
 
\t \t \t }) 
 
\t \t $('.position3').css({ 
 
'color':'rgba(155,0,255,1.00)', 
 
\t \t \t }) 
 
\t \t } 
 
\t if (scroll > 5000 && scroll < 6000) { 
 
\t \t $('.position').css({ 
 
'color':'cyan', 
 
'background':'rgba(255,238,0,1.00)', 
 
'text-shadow':'none' 
 
\t \t \t }) 
 
\t \t $('.position2').css({ 
 
'color':'rgba(176,50,0,1.0)', 
 
\t \t \t }) 
 
\t \t $('.position3').css({ 
 
'color':'rgba(100,16,5,1.00)', 
 
\t \t \t }) 
 
\t \t } 
 
\t if (scroll > 5000 && scroll < 6000) { 
 
\t \t $('.position').css({ 
 
'color':'blue', 
 
'background':'rgba(243,255,217,1.00)', 
 
\t \t \t }) 
 
\t \t $('.position2').css({ 
 
'color':'rgba(136,168,191,1.0)', 
 
\t \t \t }) 
 
\t \t $('.position3').css({ 
 
'color':'rgba(68,47,168,1.0)', 
 
\t \t \t }) 
 
\t \t } 
 
var color=$('.position').css('color'); 
 
$('#p1color').html(color); 
 
var color=$('.position2').css('color'); 
 
$('#p2color').html(color); 
 
var color=$('.position3').css('color'); 
 
$('#p3color').html(color); 
 
    
 
\t \t }); 
 
} 
 
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) {})）当该功能被绑定，绑定的功能。当你滚动时，该函数将从此开始，每次调用动画时，如果启用为true，则只是重新绑定该函数。你需要做的是在你的函数中放入启用变量，该函数绑定到滚动事件。

$(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 
} 

希望帮助！