target rest of the document, stop scrolling and toggleClass

I'm working on a dropdown menu, and I'm using jQuery to manipulate the DOM. So far, I'm able to toggle the menu into and out of view. Whenever the menu is in view, I have it CSSposition property set to fixed with the top, left and bottom properties set to Zero and its width to 90% as follows

.menu-container{
position:fixed;
top:0;
left:0;
bottom:0;
width:90%
}

My problem is two-fold

When I scroll on the menu (for instance, when testing), the rest of
the document scrolls as well. I would like to confine scrolling to
the menu container whenever the menu is in view.

The document will always scroll during a scroll action unless the mouse is over an element that itself has scroll, i.e. it has overflow: scroll or overflow: auto and a fixed height

With this in mind, modify your menu to have

overflow: scroll;
height: 300px; /* for example */

Next, how to close it on blur. The logic here is you want to invoke closure on any click that is not within the menu - in other words, the click should not be on the menu itself or any of its child/descendent elements. Here's how: