Question

我在我的网站顶部有一个绝对定位的栏，它是可见的或不可见的，实际上是从顶部用jquery函数向下滑动。在那个酒吧下面是一个小箭头我希望永远可见。因此，如果栏被隐藏，则箭头应位于浏览器窗口的顶部。如果条形图是可见的，我希望它位于条形图下方，就像这个小提琴...... http://jsfiddle.net/aRZn7/

HTML：

<div id="metaBar"></div>

<div class="meta-arrow">
    <div class="down"></div>
</div>

CSS：

#metaBar {
    position:absolute;
    background:#000;
    width: 100%;
    height:30px;
    /*display:none;*/
}

.meta-arrow {
    position:relative;
    margin:0 auto;
}

.down {
    position:absolute;
    top:30px;
    right:30px;

    width:0;
    height:0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-top:8px solid #000;
}

但是考虑到当我使用jquery slideDown（）向下滑动metabar时，我希望小箭头随之移动。

有办法吗？

Answer 1

将箭头放在条形图内并使用top: 100%;（或等效的像素值）。只要您不在栏上使用overflow: hidden，它就会像现在一样显示在栏外。

Answer 2

对于一个没有大惊小怪的方法，你可以引入一个条形容器来包含你的箭头和黑条，如下所示：

<强> CSS

.bar-container {
    position:relative;
}

#metaBar {
    position:relative;
    background:#000;
    width: 100%;
    height:30px;
    display:none;
}

.meta-arrow {
    position:relative;
    margin:0 auto;
}

.down {
    position:absolute;
    top:100%;
    right:30px;
    width:0;
    height:0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-top:8px solid #000;
}

/* test stuff */

a#slidedown {
    position:fixed;
    bottom:0;
    left:0;
    padding:10px 20px;
    background-color:black;
    color:white;
}

<强> HTML

<div class="bar-container">
<div id="metaBar"></div>

<div class="meta-arrow">
    <div class="down"></div>
</div>
</div>

演示：http://jsfiddle.net/aRZn7/29/

位置箭头位于绝对定位的栏下方？

2 个答案: