Skip to content

Instantly share code, notes, and snippets.

@vikrantnegi
Created September 25, 2017 07:51
Show Gist options
  • Save vikrantnegi/f91cc3e185a2e9410c5592d2b888b8f5 to your computer and use it in GitHub Desktop.
Save vikrantnegi/f91cc3e185a2e9410c5592d2b888b8f5 to your computer and use it in GitHub Desktop.
Bootstrap dropdown list position (Up/Bottom) based on document height
function determineDropDirection(){
$(".dropdown-menu").each( function(){
// Invisibly expand the dropdown menu so its true height can be calculated
$(this).css({
visibility: "hidden",
display: "block"
});
// Necessary to remove class each time so we don't unwantedly use dropup's offset top
$(this).parent().removeClass("dropup");
// Determine whether bottom of menu will be below window at current scroll position
if ($(this).offset().top + $(this).outerHeight() > $(window).innerHeight() + $(window).scrollTop()){
$(this).parent().addClass("dropup");
}
// Return dropdown menu to fully hidden state
$(this).removeAttr("style");
});
}
determineDropDirection();
$(window).scroll(determineDropDirection);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment