Image Scrolling With Animation

http://stackoverflow.com/q/26541632/1144203

HTML

<div class="topbar"></div>
<div id="img">
    <img src="https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwj98eCmzJneAhVFqaQKHRX5CHMQjRx6BAgBEAU&url=https%3A%2F%2Fpngtree.com%2Ffree-cloud-png&psig=AOvVaw2vtfCaL7OaCoJ54Ffj2qdQ&ust=1540282147148454" />
</div>

CSS

*{
   margin: 0;
   padding: 0;
}

body{
    height: 2000px;
}

.topbar{
    position: fixed;
    background: red;
    height: 110px;
    width: 100%;
    z-index:-1;
}

#img {
    float: right;
}

JavaScript

num = $('.topbar').offset().top;
$(window).bind('scroll', function() {
    if ($(window).scrollTop() > num) {
        $('.topbar').stop().animate({height: 34}, 200);
    } else {
        $('.topbar').stop().animate({height: 110}, 200);
    }
});