Форум

Vanguger · #1 (**permalink**) 04.08.2015, 10:24

Друзья, подскажите пожалуйста, как осуществить следующее: есть блок <ul id="container">

Мне нужно, чтобы если в данный момент не осуществляется прокрутка, то добавить в этот блок класс .hovered. Если же прокрутка осуществляется, то удалить этот класс.

ksa · #2 (**permalink**) 04.08.2015, 10:52

Сообщение от Vanguger

если в данный момент не осуществляется прокрутка, то добавить в этот блок класс .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>

Vanguger · #3 (**permalink**) 04.08.2015, 13:46

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

Форум

Справочник

Discord чат

Курсы javascript