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">
      Cool dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu reverse" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="reverse-toggle top-reverse hidden"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Reverse towards top</a></li>
    <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>
      <li role="presentation" class="reverse-toggle bottom-reverse hidden"><a role="menuitem" tabindex="-1" href="javascript:void(0)">Reverse towards bottom</a></li>
  </ul>
</div>
</div>

CSS

#container{
    width:100%;
    height:193vh;
}

.dropdown{
    position:absolute;
    bottom: 0;
}

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

JavaScript

$(window).scroll(function () {
    // if the dropdown is "high enough" on the page, show the toggle commands
    if(($(window).scrollTop() + $(window).height() > $(document).height() - 256)){
        if($(".dropdown-menu").hasClass("reverse")){
            // if the dropdown is already reversed
            $(".bottom-reverse").removeClass("hidden");
            $(".top-reverse").addClass("hidden");
        }
        else{
            $(".top-reverse").removeClass("hidden");
            $(".bottom-reverse").addClass("hidden");
        }
    }
    else{
        $(".top-reverse").addClass("hidden");
        $(".bottom-reverse").addClass("hidden");
    }
});

$(".reverse-toggle").click(function(){
    $(".dropdown-menu").toggleClass("reverse").dropdown("toggle");
    $(".top-reverse").toggleClass("hidden");
    $(".bottom-reverse").toggleClass("hidden");
});