Как сделать так что при скроле страницы transition:0s;?

Question

[zeni1agent]

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

.test1{
position: fixed;
overflow: hidden;
width: 100px;
height:  100px;
top:100px;
background-color: blue;
}
.test2{
position: absolute;
width: 100vw;
height:   100vh;
position:   -fixed;
background-color: red;
top:-100px;
transition: 10s;
}
.testact2{
transition: 10s;
transform: translate( 50px, 0);
}
.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;
}

jQuery('document').ready(function(){
  var topi = parseInt($('.test2').css("top")); 
  window.onscroll = function() {
  var s = $(window).scrollTop();
  $('.test2').css('top',  -s-100);
$('.test2').css('transitionDuration', 0);
  } 
  $('.test10').on('click', function(e){
  e.preventDefault();
  $('.test2').toggleClass('testact2');
})
});

<a class="test10"></a>
    
<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>

Мне необходимо что бы при скроле страницы анимация должна быть резкой моментальной transition: 0s;
А при нажатий на кнопку test10 анимация была плавной transition: 10s
Как мне это сделать?
Вот рабочий пример кода
codepen