我需要阻止仅在单击div#onblock -red square-时滚动功能的类“ position”而不是“ position2”或“ position3”类使用的功能,并在div#reactivate -blue square-时重新激活它点击了
$(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>
解决OP的具体问题。这是怎么做的。有关更多说明,请参见其他答案。
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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句