Удаление класса при прокрутке
Друзья, подскажите пожалуйста, как осуществить следующее: есть блок <ul id="container">
Мне нужно, чтобы если в данный момент не осуществляется прокрутка, то добавить в этот блок класс .hovered. Если же прокрутка осуществляется, то удалить этот класс. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
-->
<style type='text/css'>
#container {
height: 200px;
overflow: auto;
border: 1px solid;
}
#content {
height: 2000px;
}
#label {
position: fixed;
top: 10px;
left: 10px;
width: 20px;
height: 20px;
}
.on {
background-color: aqua;
}
</style>
<script type='text/javascript'>
$(function(){
var o_tim;
$('#container').scroll(function(){
if (o_tim) {
clearTimeout(o_tim)
};
if ($('#label').hasClass('on')) {
$('#label').removeClass('on');
};
o_tim=setTimeout(function(){
$('#label').addClass('on');
},1000);
});
});
</script>
</head>
<body>
<div id='container'>
<div id='label' class='on'></div>
<div id='content'></div>
</div>
</body>
</html>
|
ksa, Спасибо большое!Вот так заработало, как мне нужно!
var o_tim;
$(window).scroll(function(){
if (o_tim) {
clearTimeout(o_tim)
};
if ($('#container').hasClass('hovered')) {
$('#container').removeClass('hovered');
};
o_tim=setTimeout(function(){
$('#container').addClass('hovered');
},1000);
});
|
| Часовой пояс GMT +3, время: 10:31. |