Element scrollTop Property - Slide in an element when the user has scrolled down 350 pixels from the top of the page - Javascript DOM

Javascript examples for DOM:Element scrollTop

  1. HOME
  2. Javascript
  3. DOM
  4. Element scrollTop

Description

Element scrollTop Property - Slide in an element when the user has scrolled down 350 pixels from the top of the page

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
.slideUp {//w ww. ja  va 2  s .  c  o  m
    animation-name: slideUp;
    -webkit-animation-name: slideUp;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
}

@keyframes slideUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

@-webkit-keyframes slideUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}

body {height:1500px;}
.col-1 {float:left}
.col-2 {float:left;padding-left:25px;}
img {width:180px;height:100px;visibility:hidden;}
hr {margin-top:400px;}
</style>
</head>
<body>

<p>Scroll down this page.</p>
<p>This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. </p>

<hr>
<div class="col-1">
  <img id="myImg" src="http://java2s.com/resources/a.png" width="304" height="228">
</div>

<div class="col-2">
  Just some text..
</div>

<script>
window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
        document.getElementById("myImg").className = "slideUp";
    }
}
</script>

</body>
</html>

Related Tutorials