如何阻止功能单击一个div以及如何在单击另一个div时重新激活

Question

我需要阻止该功能仅适用于班级＆＃34;位置＆＃34;而不是＆＃34; position2＆＃34;也不是＆＃34; position3＆＃34;单击div＃onblock -red square-时的scroll函数，并在单击div #rectivate -blue square-时重新激活它

＆＃13;

＆＃13;

$(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);

});

＆＃13;

body {
  margin: 0;
  padding: 0;
  height: 5000px;
}
#onblock {
  float: right;
  width: 100px;
  height: 100px;
  background: red;
  position: fixed;
  margin-left: 50%;
}
#reactivate {
  float: right;
  width: 100px;
  height: 100px;
  background: blue;
  margin-top: 100px;
  margin-left: 50%;
  position: fixed;
}
.position {
  position: fixed;
  color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="position">
  A
</div>
<div id="onblock">
</div>
<div id="reactivate">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

即使我的问题与您的代码之间没有任何背景信息。我将尝试给你一个例子，说明如何通过编辑函数本身或不在条件下运行函数来阻止函数执行它的功能。

用评论解释逻辑......

＆＃13;

＆＃13;

var enable = true;
var enable2 = true;

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


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


// in this case you have access to the function...
function animateIt() {
  if (!enable) return; // return from the function if not enabled...
  $('#animateThis').css('margin-left', '0px');
  $('#animateThis').animate({
    'marginLeft': '70%'
  }, 2000, animateIt);
}
animateIt(); // call the function for the first time...









// now let's say you dont have access to this function... or don't want to edit it...

var backup = animateIt2; // create a backup of the function...


$('#disable2').on('click', function() { // on click 'disable' change the function itself...
    animateIt2 = function() {
      return false;
    }
})

$('#enable2').on('click', function() {
  // on enable change the function back to it's old defination...
  if (backup) {
    animateIt2 = backup; //
    animateIt2()
  } else {
    animateIt2()
  }
})

function animateIt2() {
  $('#animateThis2').css('margin-left', '0px');
  $('#animateThis2').animate({
    'marginLeft': '70%'
  }, 2000, animateIt2);
}
animateIt2();

＆＃13;

.btn {
  width: 150px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: Blue;
  color: #FFF;
  float: left;
  margin-right: 20px;
}
.clearIt {
  clear: both;
}
#animateThis,
#animateThis2 {
  width: 100px;
  height: 100px;
  margin: 50px 0px;
  background: Red;
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enable" class="btn">Enable</div>

<div id="disable" class="btn">Disable</div>

<div class="clearIt"></div>
<div id="animateThis"></div>



<div class="clearIt"></div>
<div id="enable2" class="btn">Enable</div>

<div id="disable2" class="btn">Disable</div>

<div class="clearIt"></div>
<div id="animateThis2"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

解决OP的具体问题。这是怎么做的。有关详细说明，请参阅其他 answer 。

var block = false;

$('#onblock').on('click', function() {
  block = true;
})

$('#reactivate').on('click', function() {
  block = false;
})

$(window).scroll(function(event) {
  if(block) return;
  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);

});

body {
  margin: 0;
  padding: 0;
  height: 5000px;
}
#onblock {
  float: right;
  width: 100px;
  height: 100px;
  background: red;
  position: fixed;
  margin-left: 50%;
}
#reactivate {
  float: right;
  width: 100px;
  height: 100px;
  background: blue;
  margin-top: 100px;
  margin-left: 50%;
  position: fixed;
}
.position {
  position: fixed;
  background: green;
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="position">
    A
  </div>
  <div id="onblock">
    Block it!
  </div>
  <div id="reactivate">
    Reactivate!
  </div>
</body>