Question

我正在制作像Twitter一样的导航栏，但我希望该栏内的一个div向下滚动通知或新闻，而另一个栏内容保持“原样”。有什么建议吗？ 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;
}

这是主要的HTML代码

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

谢谢！

Answer 1

对于live-pin.com网站，这似乎有效：

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

和

<!-->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>

独立的div切换

1 个答案: