@zeni1agent

Как при скролинге страницы положение див двигался в противоположную сторону?

Мне необходимо что бы при скролинге страницы див двигался в противоположную сторону свойства как 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
  • Вопрос задан
  • 44 просмотра
Решения вопроса 1
@zeni1agent Автор вопроса
Мое решение
jQuery('document').ready(function(){
  
  
$(function(){
var CurrentScroll = 0;
  $(window).scroll(function(event){
  var NextScroll = $(this).scrollTop();
if (NextScroll > CurrentScroll){		  
var s = $(window).scrollTop();
$('.test2').css('top', -s+0);
}
else {         
var s = $(window).scrollTop();
$('.test2').css('top', -s+0);
}
      CurrentScroll = NextScroll;
  });
});
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы