Say you have a side menu that opens from one side after clicking on an icon in a website. This menu would take more than 40% of the view-port in the horizontal direction.
If the user scrolls down, is it better to let the user click on the close button, or to hide/close the menu automatically?
Many elements, such as light-boxes, will close if you detect a click outside of your box. One simple way to do that: toggle a bool on mouseenter and mouseleave and then on click do if(!InPanel) closePane(); This is my primary suggestion.
I think depending on the purpose of the panel, the user will sometimes want to scroll down the page to view something while changing settings in the panel. Especially if you've got some sort of live search filter and things like that. If this is not the case I think it is fine to close on scrolling - but again not if the user is inside the panel with their mouse.
While a close button can be a slight nuisance, if you make it an arrow icon inside of the border, it usually goes over pretty well to expand/collapse this way.
Instead of a close button, you could provide a pin button. That way you let the user dictate if the menu remains visible or slides away.
Whether the menu defaults to pinned or unpinned will depend which option makes sense for the majority of users / use cases. For example, say you default to unpinned because most users need the extra space to view content. If a user has a use case where they want to see the menu while they scroll they can pin it, otherwise it slides away.
There could be 2 options here:
the side panel closes automatically as suggested by @GaretClaborn and then when user opens the panel again, the menu opens on the same state where you left it.
The user can be warned about unsaved changes in the flyout panel if they navigate away from it. For example in the form of a mini dialogue as shown in the picture below:
Image source: https://2sxc.org/en/blog/post/non-blocking-are-you-sure-dialog-pattern-with-angularjs-300
