How to affix dropdown list menu next to selected dropdown button when user scrolling?

问题

I have faced the similar problem occurred on this page as in my App. When a user selects the drop-down list it will open drop-down menu. But, When the user scroll down the page, the drop-down menu is still on the same position.

How to resolve this?

Thanks in advance.

回答1:

I've recently faced this type of issue.

So I've used mouseenter,mouseleave events.

$( ".menu-open" )
  // not necessary 
  .mouseenter(function() {
    $( this ).show();
  })
  // you must put this to hide menu when user leaves the menu
  .mouseleave(function() {
    $( this ).hide();
  });

Well so by using above code it will hide the menu as soon as user moves cursor out of the menu.

It will be quite good experience for users as well, like they don't care if menu get closed when they don't need it more. but if it will kept open unless user again click on menu to close it so feel odd.

Like the same I get from your given e.g. link.

Or else you can use scroll event like once user scroll down to specific value you can check if menu is opened then you can hide it.

来源：https://stackoverflow.com/questions/36645087/how-to-affix-dropdown-list-menu-next-to-selected-dropdown-button-when-user-scrol