Как сделать position:fixed; наоборот?

Question

[zeni1agent]

У меня есть вот такой код

.test1{
position:    fixed;
overflow: hidden;
width: 100px;
height:   100px;
}
.test2{
width: 100%;
height:   100%;
position:   -fixed;
}

<div class="test1">
<div class="test2"></div>
</div>

$(function(){
var CurrentScroll = 0;
  $(window).scroll(function(event){
      var NextScroll = $(this).scrollTop();
      if (NextScroll > CurrentScroll){
		 alert('down'); 
		var topp = parseInt($('.test2').css("top")); 
		$('.test2').css('top', topp-1);
});
}
else {
         alert('top');
		var topi = parseInt($('.test2').css("top")); 
		$('.test2').css('top', topi+1);
});
}
      CurrentScroll = NextScroll;  //Updates current scroll position
  });
});

и мне необходимо что бы при скролинге вниз test2 оставался на месте а test1 двигался вниз

Comments

[Максим Тимофеев]

position: fixed;
означает "вертел я Ваш скрол на ... "
По сути Вы говорите: "я хочу, что бы ты не реагировал на скрол", и тут же хотите чтобы при скроле с ним что-то происходило.

по сути ответ на вопрос

Как сделать position:fixed; наоборот?

position: relative;

[zeni1agent]

Максим Тимофеев, Вы меня неправильно поняли
position:fixed; при скроле вниз работает как
bottom: px ;
А мне нужно что бы test2 двигался в ровно противоположном направлений.
Поскольку test1 окно через которое смотрю на содержимое test2
code

Answer 1

[Henry Chinasky]

test1 дай display:block; а test2 display:fixed

Comments

[zeni1agent]

display:fixed не существует

Answer 2

[Medin K]

формулируйте вопрос яснее
так хотите? https://jsfiddle.net/8cxk4vy7/

Comments

[zeni1agent]

Нет мне нужно что бы
При прокрутке вниз test2 оставался как обычная страница на месте
А test1 было как окно через которое можно смотреть на содержимое test2
code

[leni_m]

zeni1agent,

При прокрутке вниз test2 оставался как обычная страница на месте

обычная страница при прокрутке вниз не стоит на месте, а скролится, ничего не понятно.

[Medin K]

zeni1agent,
Это не решение, а то как я понял https://jsfiddle.net/gptaLm7d/
Советую вам давать понятные имена классам.
То есть у вас некий контент content, который не виден весь.
Но есть блок viewer в котором видно содержимое контента по позиции скрола.
Этот блок viewer должен передвигаться при скроле и отображать под собой содержимое.
Думаю на чистом css это не сделать

[zeni1agent]

leni_m, ладно тогда мне нужно что бы при скролинге страницы вниз test1 следовал вниз за областью видимости для этого существует position: fixed; а test2 скролился в верх

$(function(){
var CurrentScroll = 0;
  $(window).scroll(function(event){
      var NextScroll = $(this).scrollTop();
      if (NextScroll > CurrentScroll){
		 alert('down');
 $('.test2').css({
    'top': $('.test2').css('top'+1)
});
}
else {
         alert('top');
 $('.test2').css({
    'top': $('.test2').css('top'-1)
});
}
      CurrentScroll = NextScroll;  //Updates current scroll position
  });
});

И таким образом создавался бы эффект того что окно двигается
Как здесь только вместо мыши действие работало в качестве полосы прокрутки.

[zeni1agent]

Medin K, Ну примерно оно должно работать как у вас. Только все что за областью .viewer должно быть скрыто.

[Medin K]

zeni1agent, самому стало интересно ) https://jsfiddle.net/L6vu4rb5/
граничные условия в js вы уж сами

[zeni1agent]

Medin K, Как по мне работает очень криво.
Можно ли сделать примерно такое но более равномерное
code
Проблема в том что действие действует каждый раз при воздействие скролинга но он не сидит расстояние между рывками воздействия.

[zeni1agent]

Medin K, Тем более слежка по колесу мыши не очень надежна ведь можно запросто по неосторожности все поломать.

[Medin K]

zeni1agent, плати )
Я показал вам примерное решение. Дальше сами.

[zeni1agent]

Medin K,
Мне просто интересно почему все программисты любят все усложнять
Вот то что я хотел сделать
code

[Medin K]

zeni1agent, поэтому важно четко формулировать чего вы хотите. Вас ни кто не понял.

[zeni1agent]

Medin K, Ладно тогда если вам не трудно можете ответить на вот такой вопрос.
Мне нужно получить начальное css значение top сохранить, что бы потом прибавлять к нему scrollTop

.test2{
top:100px;
}

$(window).scroll(function(f) {
var topi = parseInt($('.test2').css("top")); 
var s = $(window).scrollTop();
$('.test2').css('top',   s+topi);       
});

topi должен оставался одного и того же размера. Менялся лишь значение s.