Question

I’m making a navigation bar like Twitter, but I want that one div inside that bar scrolls down with notifications or news, and the other bar content stay “as is”. Any suggestion?
http://jsfiddle.net/fdezluis96/JJ29E/

#navigation{
position:fixed;
top:0;
left:0;
width:100%;
padding:5px;
color: #fff;
height:32px;
font-size:20px;
background: #333;
}​

And this is the main HTML code

<div id="navigation">This is the main div static content
    <div id="subnavigation">This is the scrolling content.</div>
</div>​

Thanks!

Answer 1

For the live-pin.com website, this seems to work:

<!-->Add "position: relative;" to have a non-statically position parent.</-->
<div class="nav-collapse" style="position:  relative;">

and

<!-->Change inline styles from "background:#fff; width:300px; overflow:auto;" to "background: #fff; border: 1px solid #fff; border-top-width:0px; border-bottom-width:0px; background: #666; border-radius: 5px; border-top-right-radius: 0px; border-top-left-radius: 0px; position: absolute; max-width: 300px;" (mostly from the fiddle, but "position: absolute" to keep it where it is and remove it from the normal document flow; removing it from the document flow is what allows it to escape its parent's containment.) </-->
<li id="notificationss" style="background: #fff; border: 1px solid #fff; border-top-width:0px; border-bottom-width:0px; background: #666; border-radius: 5px; border-top-right-radius: 0px; border-top-left-radius: 0px; position: absolute; max-width: 300px;">
    dssdadsadas
    <br>dsadsasdadssdadsadas
    <br>dsadsasdadssdadsadas
    <br>dsadsasdadssdadsadas
    <br>dsadsasdadssdadsadas
    <br>dsadsasdadssdadsadas
    <br>dsadsasda
</li>