Question

JSFIDDLE here

小提琴应该是应有的，但现在我想改变它的工作方式。目前只有fixed_header_top永久修复，我希望永久修复fixed_header_middle，但在向下滚动时应逐渐消失在 fixed_header_bottom和body_block下

喜欢这个：http://livedemo00.template-help.com/wt_43176/index.html

此操作需要更改哪些内容？

我将position: fixed;提供给#fixed_header_middle，将margin-top: 50px; z-index: 100;提供给#fixed_header_bottom, #fixed_placeholder，但没有效果。

由于

Answer 1

检查我是否已经完成了小提琴你所做的只是你必须添加

是正确的

#fixed_header_bottom, #fixed_placeholder {

   margin-top: 150px;
   position: absolute;

}

Check on fiddle

Answer 2

解决。

修改后的CSS：

#top
{
    display: block;
    position: relative;
    width: 100%;
    height: 150px;
    background-color: #1133DD;
}
#fixed_header_top
{
    display: block;
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: #DD33DD;
    top: 0px;
    z-index: 100;
}
#fixed_header_middle
{
    display: block;
    position: absolute;
    width: 100%;
    height: 100px;
    background-color: #DDDD00;
    top: 50px;
}

修改后的HTML：

<div id="top">
    <div id="fixed_header_top">fixed_header_top</div>
    <div id="fixed_header_middle">fixed_header_middle</div>
</div>

Answer 3

我已经修改了你的CSS，现在工作正常

<强> See Working Demo

修改CSS

#fixed_header_middle {
    /*other stuff*/
    position: fixed;
    z-index:-1;
}

#fixed_header_bottom {
    margin-top: 150px;
}

.fixed {
    position: fixed;
    top: 50px;
    margin-top: 0!important; /*Important because Id has more weight*/
}

#body_block {
    background:#FFF;
}

固定div在滚动时在不固定的div下消失

3 个答案: