JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="content">
    <div class="viewer">
      <!-- под этим блоком должно отображаться содержимое content по позиции скрола -->
    </div>
    <!-- content по умолчанию не виден -->
    <div class="hidden-before"></div>
    <div class="hidden-after"></div>
    <p>
      Нет мне нужно что бы 
      При прокрутке вниз test2 оставался как обычная страница на месте
      А test1 было как окно через которое можно смотреть на содержимое test2
    </p>
    <div>1111111111111111111111</div>
    <div>222222222222222222222</div>
    <div>33333333333333333333</div>
    <div>444444444444444444</div>
    <div>5555555555555555</div>
    <div>66666666666666666</div>
    <div>777777777777</div>
    <div>88888888888</div>
    <div>999999999999999</div>
    <div>1000000000000000</div>
    <div>111111111111</div>
    <div>122222222222222</div>
    <div>13333333333333333</div>
  </div>
</div>

CSS

.container {
  position: relative;
}

.content {
  background: white;
  border: 2px solid black;
}

.viewer {
  outline: 2px solid red;
  height: 60px; /* высота блока просмотра */
  width: 100%;
  position: absolute;
  top: 0;
}

.hidden-before,
.hidden-after {
  background: white;
  height: 0;
  opacity: 1;
  position: absolute;
  width: 100%;
}

.hidden-before {
  top: 0;
}

.hidden-after {
  bottom: 0;
}

JavaScript

var content = document.querySelector('.content'),
	viewer = document.querySelector('.viewer'),
	contentBound = content.getBoundingClientRect(),
	viewerBound = viewer.getBoundingClientRect(),
  hiddenBefore = document.querySelector('.hidden-before'),
  hiddenAfter = document.querySelector('.hidden-after'),
  y = 0;

$(content).on("wheel mousewheel", function(e) {
	onWheel({ deltaY:e.originalEvent.deltaY });
});

onWheel({deltaY:0});

function onWheel(e) {
console.log(e);
  var vh = viewerBound.height;
  var ch = contentBound.height;
  if (e.deltaY > 0) {
  	y = y + 10;
  } else {
  	y = y - 10;
  }

  var bound = {
  	beforeHeight: y,
    afterHeight: ch - vh - y
  };

  hiddenBefore.style.height = bound.beforeHeight + "px";
  hiddenAfter.style.height = bound.afterHeight + "px";
  viewer.style.top = y + "px";

	console.log(viewerBound, contentBound, e.deltaY, bound);
}