JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div id="container">
    <div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>
</div>

CSS

#container{
    width:100%;
    height:800px;
    position: absolute;
}

.dropdown{
    position:absolute;
    top:350px;
}

.reverse {
    top:auto;
    bottom:100%;
}

JavaScript

$(window).scroll(function () {
    var scrollTop = $(window).scrollTop();
    if(scrollTop > 150){
        $('.dropdown').children('.dropdown-menu').addClass('reverse');
    }else{
         $('.dropdown').children('.dropdown-menu').removeClass('reverse');
    }
});