<title>jQuery Show/Hide Image on Scroll Down or Up</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
$(window).scroll(function() {
if ($(this).scrollTop()>700){
$('.myimgDiv').hide(1000);
$('.myimgDiv').show(1000);
<h2>jQuery Show/Hide Image on Scroll Down or Up</h2>
<div>Please scroll down slowly to see effect.</div>
<div style="margin-top:380px;">Please scroll down slowly to see effect.</div>
<div style="margin-top:380px;">Please scroll down slowly to see effect.</div>
<img src="../../images/user1.jpg" alt="Manager" class="img-responsive img-thumbnail"/>
<div style="margin-top:300px;">Please scroll up slowly to see effect.</div>
<div style="margin-top:300px;">Please scroll up slowly to see effect.</div>