JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height:3000px; position:relative; margin-top:150px; float:left;">

<span id="subnav" style="background-color:#000; height:20px; color:#fff;  width:1000px; float:left;">hold this</span>
</div>

JavaScript

$(document).ready(function() {
   $(window).scroll(function() {
       var scrollVal = $(this).scrollTop();
        if ( scrollVal > 150) {
            $('#subnav').stop().animate({'margin-top':'100px'},1000);
        } else {
            $('#subnav').stop().animate({'margin-top':'0px'},1000);
        }
    });
 });