JSFiddle - React, Tailwind, and code Playground

by emn178

HTML

<img id="logo" src="http://blog.stackoverflow.com/wp-content/uploads/StackExchangeLogo1.png">
<h1>Foo Bar</h1>
<p>ABC12345</p>

CSS

#logo {
    position: absolute;
    top: -100%;
    -webkit-transition: top 0.5s;
    -moz-transition: top 0.5s;
    -ms-transition: top 0.5s;
    -o-transition: top 0.5s;
    transition: top 0.5s;
  }
  #logo.show {
      top: 0;
  }

JavaScript

var perY;
  var y;
  $(window).on('touchmove', function(e) {
    e.preventDefault();
    y = window.event.touches[0].pageY;
    if(!perY)
      perY = y;
    else
    {
      if(y > perY)
        $('#logo').addClass('show');
      else
        $('#logo').removeClass('show');
      perY = null;
    }
  });