Wie man eine Funktion blockiert Ein Klicken auf ein Div und wie man bei einem anderen Div wieder aktiviert

Question

Ich muss die Funktion blockieren nur für die Klasse "Position", nicht "Position2" noch "Position3" der Scroll-Funktion wenn div # onblock -rot Quadrat- geklickt wird und es wieder zu aktivieren, wenn div # reaktivieren -blau Quadrat-

geklickt wird

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

 
});

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; 
 
}

<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>

Answer 1

das spezifische Problem der OP zu lösen. Hier ist, wie es geht. Für weitere Erklärungen siehe die anderen 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>

Answer 2

Auch wenn ich keinen Zusammenhang zwischen Frage und Ihren Code zu sehen. Ich werde versuchen, Ihnen ein Beispiel dafür zu geben, wie Sie verhindern können, dass eine Funktion das tut, indem Sie die Funktion selbst bearbeiten oder die Funktion selbst nicht unter Bedingung ausführen.

Logic wird mit Kommentaren erklärt ...

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

.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; 
 
}

<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>