JSFiddle - React, Tailwind, and code Playground

by Nikolay Petrov

HTML

text text<br/>
text text text text<br/>
text text<br/>
text text text<br/>
<br/>
text text<br/>
text text text text<br/>
text text<br/>
text text text<br/>
<br/>
<input type="checkbox" id="menu"/>
<label class="label" for="menu">menu</label>

text text<br/>
<a href="#" class="link">link</a>
text text text text<br/>
text text<br/>
text text text<br/>
<br/>
text text<br/>
text text text text<br/>
text text<br/>
text text text<br/>
<br/>text text<br/>
text text text text<br/>
text text<br/>
text text text<br/>
<br/>
text text<br/>
text text text text<br/>
text text<br/>
text text text<br/>
<br/>text text<br/>
text text text text<br/>
text text<br/>
text text text<br/>
<br/>
text text<br/>
text text text text<br/>
text text<br/>
text text text<br/>
<br/>

CSS

label {
  background:pink;
  padding:10px;
  user-select: none;
  transition: all .2s ease-out;
  position:absolute;
  /* top:0; */
}

input[type=checkbox]:checked + label {
  background:green;
  transition: all .2s ease-out;
  transform: translateY(-170px);
  /* animation: move 1s ease; */
}
/* 
@keyframes move {
  0% {
     transform: translateY(0px);
  }
  100% {
    transform: translateY(-70px);
  }
} */

JavaScript

$('.link').click(function(){

	var scroll = $(window).scrollTop();
  var label = document.querySelector('.label');
  
  /* 
  var rect = label.getBoundingClientRect();
  console.log("getBoundingClientRect(): " + rect.top);
  console.log("offset: " + label.offsetTop); 
  */
  
	$('label').css({"transform":"translateY(-"+(label.offsetTop-scroll)+"px)"});
  console.log(scroll);
	return false;
});