Bootstrap dropdown list position (Up/Bottom) based on document height

Question

I have bootstrap dropmenu list on my page. When page is minimized or screen is adjusted, the menulist is going off the screen. I want to check and display them in upwards if screen height is making the list going off the screen.

here is my html,

 <div  class="btn-group pull-right">                    
 <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Click<span class="caret"></span></button>
                <ul  class="dropdown-menu pull-right" role="menu">
                    <li>First</li>
                    <li>Second></li>
                    <li>Third</li>
                    <li><Fourth</li>
                    <li>Fifth</li>
                </ul>
            </div>

Note: List is going off in respective to height, not width. Width of the screen doesn't matter because i am already using "pull-right" which makes my list display inside the screen.

Answer 1

I've created a click event based on @Serlite solution in case you just want to execute the code if any dropdown menu is clicked:

$(document.body).on('click', '[data-toggle=dropdown]', function(){
    var dropmenu = $(this).next('.dropdown-menu');

    dropmenu.css({
        visibility: "hidden",
        display: "block"
    });

    // Necessary to remove class each time so we don't unwantedly use dropup's offset top
    dropmenu.parent().removeClass("dropup");

    // Determine whether bottom of menu will be below window at current scroll position
    if (dropmenu.offset().top + dropmenu.outerHeight() > $(window).innerHeight() + $(window).scrollTop()){
        dropmenu.parent().addClass("dropup");
    }

    // Return dropdown menu to fully hidden state
    dropmenu.removeAttr("style");
});