I am confused, could you please simplify & update with simple use case/diagram covering your use case.
I have never see something like you are describing, generally because even if you could avoid the issues with the new bar being in a differnet element it just will be a hard to author content in the hidden area (drag drop isn't going to work very well for example).
In the past when I have had similar requirements I tended to take one of several approaches depending on the preference of my authors and the specifics of the page layout.
- Create an Edit & Design mode version of the view - in this scenario either by printing out different CSS/JS, or printing out different markup based on the WCM Mode I make the hidden div always visible, shut off the mouse events, and push down the content under the div rather than over laying. This means that in edit or design mode the layout isn't an exact replica of the publish mode, but it is very clear what the authorable code goes and you avoid any weirdness related to your mouse events.
- In Edit and Design mode remove the mouse over triggers and add some sort of button that will show/hide the hidden div. This gets you a little closer to our publish user experience but should reduce some of the weirdness related to the mouse events.
- Author the content on another page - use something like a teaser page to author the content, and then have your dynamic header component dialog allow the author to point to this other page. Then you grab the content from that page (there are a number of ways to do that). This option is useful if the content in your header is shared across many pages.
There are I am sure others, but those cover the common variations.