Мне необходимо что бы при скролинге страницы див двигался в противоположную сторону свойства как position:fixed только наоборот.
Я написал вот такой код но он работает не стабильно
jQuery
jQuery('document').ready(function(){
$(function(){
var CurrentScroll = 0;
$(window).scroll(function(event){
var NextScroll = $(this).scrollTop();
if (NextScroll > CurrentScroll){
var topp = parseInt($('.test2').css("top"));
$('.test2').css('top', topp-1);
}
else {
var topi = parseInt($('.test2').css("top"));
$('.test2').css('top', topi+1);
}
CurrentScroll = NextScroll;
});
});
css
.test1{
position: fixed;
overflow: hidden;
width: 100px;
height: 100px;
background-color: blue;
}
.test2{
position: absolute;
width: 100vw;
height: 100vh;
position: -fixed;
background-color: red;
}
.test3{
width: 100vw;
height: 60px;
position: -fixed;
background-color: green;
}
.test4{
width: 100vw;
height: 10px;
position: -fixed;
background-color: #fff700;
}
.test6{
width: 1px;
height: 1000px;
background-color: #fff700;
}
html
<div class="test1">
<div class="test2">
<div class="test3"></div>
<div class="test4"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test3"></div>
<div class="test4"></div>
</div>
</div>
<div class="test6"></div>
Пример на
codepen