<!DOCTYPE html>
<html>
<head>
<style>
.transform {
translate(0,-150px);
-webkit-transform: translate(0,-150px);
-o-transform: translate(0,-150px);
-moz-transform: translate(0,-150px);
}
</style>
</head>
<body>
<div id='page'>
<div class="first"></div>
<div id='about'></div>
<div class="third"></div>
</div>
<script type="text/javascript">
var animateElement = document.getElementById('page');
var getPage = animateElement.getBoundingClientRect().top + window.pageYOffset;
var elementIcon = document.getElementById('about');
window.onscroll = function() {
if (animateElement.classList.contains('transform') && window.pageYOffset < getPage) {
elementIcon.classList.remove('transform');
} else if (window.pageYOffset > getPage) {
elementIcon.classList.add('transform');
}
};
</script>
</body>
</html>