Javascript 功能不可用的禁用/启用按钮'；行不通

函数animateIt更改滚动条上的div文本颜色，我希望div#disable停止此函数，直到我单击div#enable。正如你所看到的，我写了这段代码，但是#禁用部分不起作用，所以请检查它并告诉我出了什么问题

var enable=true；
$（'#enable'）。在（'单击'，函数（）上）{
如果（！启用）{
启用=真；
animateIt（）；//启用后再次调用。。。
}
});
$（'#禁用'）。单击（函数（）{
启用=错误；
$（'#disable'）.css（'background'，'blue'）；
});
函数animateIt（）{
如果（！启用）返回；
$（窗口）。滚动（功能（事件）{
var scroll=$（窗口）.scrollTop（）；
如果（滚动>0&&滚动<1000）{
$（'.position'）.css({
“颜色”：“红色”），
‘背景’：‘rgba（0,40,90,1.00）’
})
$（'.position2'）.css({
“颜色”：“rgba（255248,0,1.00）”，
})
$（'.position3'）.css({
“颜色”：“rgba（255,0215,1.00）”，
})
}
如果（滚动>1000&&滚动<2000）{
$（'.position'）.css({
“颜色”：“绿色”，
“背景”：“rgba（255,0144,1.00）”
})
$（'.position2'）.css({
“颜色”：“rgba（0100206,1.00）”，
})
$（'.position3'）.css({
“颜色”：“rgba（0255,7,1.00）”，
})
}
如果（滚动>2000&&滚动<3000）{
$（'.position'）.css({
“颜色”：“黄色”，
“背景”：“rgba（255,0226,1.00）”
})
$（'.position2'）.css({
“颜色”：“rgba（155,0255,1.00）”，
})
$（'.position3'）.css({
“颜色”：“rgba（224,1.00）”，
})
}
如果（滚动>3000&&滚动<4000）{
$（'.position'）.css({
“颜色”：“橙色”，
“背景”：“rgba（255,2,6,1.00）”
})
$（'.position2'）.css({
‘颜色’：‘rgba（69,66179,1.00）’，
})
$（'.position3'）.css({
“颜色”：“rgba（124141245,1.0）”，
})
}
如果（滚动>4000&&滚动<5000）{
$（'.position'）.css({
“颜色”：“rgba（0,94255,1.00）”，
“背景”：“rgba（255,0226,1.00）”
})
$（'.position2'）.css({
“颜色”：“rgba（224,1.00）”，
})
$（'.position3'）.css({
“颜色”：“rgba（155,0255,1.00）”，
})
}
如果（滚动>5000&&滚动<6000）{
$（'.position'）.css({
“颜色”：“青色”，
“背景”：“rgba（255238,0,1.00）”，
“文本阴影”：“无”
})
$（'.position2'）.css({
“颜色”：“rgba（176,50,0,1.0）”，
})
$（'.position3'）.css({
“颜色”：“rgba（100,16,5,1.00）”，
})
}
如果（滚动>5000&&滚动<6000）{
$（'.position'）.css({
“颜色”：“蓝色”，
“背景”：rgba（243255217,1.00），
})
$（'.position2'）.css({
“颜色”：“rgba（136168191,1.0）”，
})
$（'.position3'）.css({
‘颜色’：‘rgba（68,47168,1.0）’，
})
}
var color=$（'.position'）.css（'color'）；
$（'#p1color'）.html（颜色）；
var color=$（'.position2'）.css（'color'）；
$（'#p2color'）.html（颜色）；
var color=$（'.position3'）.css（'color'）；
$（'#p3color'）.html（颜色）；
});
}
animateIt（）
body{文本对齐：中心；高度：10000px；}
#禁用{宽度：50px；高度：50px；位置：固定；浮动：右侧；背景：红色；}
.职位{
颜色：rgba（0255,65,1.00）；
背景：rgba（0,40,90,1.00）；
字号：900；
字体大小：12px；
字体系列：mono；
边际上限：0；
溢出：隐藏；
显示：内联块；
边缘顶端：40px；
位置：固定；
}
.职位2{
颜色：rgba（255,0215,1.00）；
字号：900；
字体大小：12px；
字体系列：mono；
边际上限：0；
溢出：隐藏；
显示：内联块；
边缘顶部：20px；
位置：固定；
}
.职位3{
颜色：rgba（255248,0,1.00）；
字号：900；
字体大小：12px；
字体系列：mono；
边际上限：0；
溢出：隐藏；
显示：内联块；
边缘顶部：60像素；
位置：固定；
}

A.
B
C
问题在于设置绑定到滚动事件的函数（例如，
$（窗口）。滚动（函数（事件）{}）
）绑定该函数时，其绑定。从那时起，当您滚动时，该函数将启动，每次调用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
 }

希望有帮助
 问题在于设置绑定到滚动事件的函数（例如，
$（窗口）。滚动（函数（事件）{}）
）绑定该函数时，其绑定。从那时起，当您滚动时，该函数将启动，每次调用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
 }

希望有帮助
 我在你的htmlI中没有看到div#enable在这bc之前停止编写div#disable不起作用，它应该@yezzz，因为该函数是默认启用的。我在你的htmlI中没有看到div#enable在这bc之前停止编写div#disable不起作用，它应该@yezzz，因为该函数是默认启用的。它按预期工作，谢谢答案和积极的氛围到此为止！正如预期的那样，非常感谢您的回答和积极的氛围！