Действия при скролле
Всем привет. У меня есть такая разметка:
<div>...</div> <div>...</div> <div>...</div> <div id="test"> <div class="test_item test_item--first"></div> <div class="test_item test_item--second"></div> <div class="test_item test_item--third"></div> </div> <div>...</div> <div>...</div> <div>...</div> Мне нужно, чтобы происходило следующее: 1)Пользователь доскролливает до div с id="test" 2)div с классом "test_item--first" получает класс "green" 3)Пользователь проскролливает, например, одну третью часть от div с id="test" 4)Класс "green" отнимается у div c классом "test_item--first" и присваивается диву с классом "test_item--second". То же самое и с третьим дивом. 5)При скролле вверх должен запускаться обратный процесс, т.е, класс green сначала присваивается третьему диву, затем второму, затем первому. Пытался использовать scrollTop, offset, ничего не выходит. Пробовал плагин kisui.scrollanim, он, в принципе, работает так, как мне нужно, только я не разобрался, как его изменить, чтобы он просто менял класс, а не применял анимацию. Подскажите плз, как это осуществить. Заранее спасибо. |
В общем, вот, всё-таки смог сделать) Если кто-то подскажет, как сделать это без такого количества условий, буду благодарен)
<div>...</div> <div>...</div> <div>...</div> <section id="steps"> <div class="steps__circle steps__circle--1"></div> <div class="steps__circle steps__circle--2"></div> <div class="steps__circle steps__circle--3"></div> <div class="steps__circle steps__circle--4"></div> <div class="steps__circle steps__circle--5"></div> <div class="steps__circle steps__circle--6"></div> </section> <div>...</div> <div>...</div> <div>...</div>
div {
height: 500px;
}
#steps {
position: relative;
min-height: 800px;
}
.steps__circle {
position: absolute;
background: #ff0000;
height: 30px;
width: 30px;
border-radius: 50%;
border: 5px solid transparent;
background-clip: padding-box;
box-shadow: 0px 0px 0px 2px #ff0000;
transition: .3s ease-in-out;
}
.steps__circle--1 {
left: 50px;
top: 100px;
}
.steps__circle--2 {
left: 250px;
top: 175px;
}
.steps__circle--3) {
left: 120px;
top: 250px;
}
.steps__circle--4 {
left: 777px;
top: 383px;
}
.steps__circle--5 {
left: 940px;
top: 465px;
}
.steps__circle--6 {
left: 860px;
top: 570px;
}
.steps__green {
background: #057D39;
background-clip: padding-box;
}
$(window).scroll(function () {
var stepsOffset = $('#steps').offset();
var currentScroll = $(this).scrollTop();
var windowheight = $(window).height();
if (stepsOffset.top < currentScroll + windowheight - 100) {
var steps=$('.steps__circle');
if (stepsOffset.top <currentScroll + windowheight - 100) {
$('.steps__circle').each(function(){
$(this).removeClass('steps__green');
})
$('.steps__circle--1').addClass('steps__green');
}
if (stepsOffset.top <currentScroll + windowheight - 200) {
$('.steps__circle').each(function(){
$(this).removeClass('steps__green');
})
$('.steps__circle--2').addClass('steps__green');
}
if (stepsOffset.top <currentScroll + windowheight - 300) {
$('.steps__circle').each(function(){
$(this).removeClass('steps__green');
})
$('.steps__circle--3').addClass('steps__green');
}
if (stepsOffset.top <currentScroll + windowheight - 400) {
$('.steps__circle').each(function(){
$(this).removeClass('steps__green');
})
$('.steps__circle--4').addClass('steps__green');
}
if (stepsOffset.top <currentScroll + windowheight - 500) {
$('.steps__circle').each(function(){
$(this).removeClass('steps__green');
})
$('.steps__circle--5').addClass('steps__green');
}
if (stepsOffset.top <currentScroll + windowheight - 600) {
$('.steps__circle').each(function(){
$(this).removeClass('steps__green');
})
$('.steps__circle--6').addClass('steps__green');
}
}
});
|
KowkogaB,
css добавьте |
Добавил
|
KowkogaB,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div {
height: 500px;
}
#steps {
position: relative;
min-height: 800px;
}
.steps__circle {
position: absolute;
background: #ff0000;
height: 30px;
width: 30px;
border-radius: 50%;
border: 5px solid transparent;
background-clip: padding-box;
box-shadow: 0px 0px 0px 2px #ff0000;
transition: .3s ease-in-out;
}
.steps__circle--1 {
left: 50px;
top: 100px;
}
.steps__circle--2 {
left: 250px;
top: 175px;
}
.steps__circle--3) {
left: 120px;
top: 250px;
}
.steps__circle--4 {
left: 777px;
top: 383px;
}
.steps__circle--5 {
left: 940px;
top: 465px;
}
.steps__circle--6 {
left: 860px;
top: 570px;
}
.steps__green {
background: #057D39;
background-clip: padding-box;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var steps=$('.steps__circle');
$(window).scroll(function () {
var stepsOffset = $('#steps').offset();
var currentScroll = $(this).scrollTop();
var windowheight = $(window).height();
steps.removeClass('steps__green');
if (stepsOffset.top < currentScroll + windowheight - 100) {
var i = 0;
if (stepsOffset.top <currentScroll + windowheight - 100) i = 0;
if (stepsOffset.top <currentScroll + windowheight - 200) i = 1;
if (stepsOffset.top <currentScroll + windowheight - 300) i = 2;
if (stepsOffset.top <currentScroll + windowheight - 400) i = 3;
if (stepsOffset.top <currentScroll + windowheight - 500) i = 4;
if (stepsOffset.top <currentScroll + windowheight - 600) i = 5;
steps.eq(i).addClass('steps__green');
}
});
});
</script>
</head>
<body> <p></p>
<div>...</div>
<div>...</div>
<div>...</div>
<section id="steps">
<div class="steps__circle steps__circle--1">1</div>
<div class="steps__circle steps__circle--2">2</div>
<div class="steps__circle steps__circle--3">3</div>
<div class="steps__circle steps__circle--4">4</div>
<div class="steps__circle steps__circle--5">5</div>
<div class="steps__circle steps__circle--6">6</div>
</section>
<div>...</div>
<div>...</div>
<div>...</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 19:50. |