13

私は 2 つの div を持っています。-トリガーされた場合にスライドダウンするメッセージ バナーを含む通知 div。

ヘッダー バーは上部に固定されていますが、通知 div がそのすぐ下に固定されていないようです。これを試すたびに、この div はヘッダー バーの前のページの上部に固定されます。置き換えているようです。パディングは役に立たないようです。

誰でも私に何か提案をしてもらえますか？

作業中の div は次のとおりです。

#header {
    text-align: left;
    background-image:url(../Resources/Banner2.gif);
    background-repeat:no-repeat;
    background-color:#00ed32;
    color:#FFF;
    position:fixed;
    width:100%;
    top:0px;
    left:0px;
    padding:15px;
}

その下に修正したいdivは次のとおりです。

.notify {
    background: url(../resources/gradients.png) 
    repeat-x 0px 0px; 
    top: -40px; 
    left: 0px;  
    position:fixed; 
    z-index: 100; 
    width: 100%; 
    overflow: hidden;
}
4

2 に答える 2

12

これを行う最も簡単な方法は、ページの上部に「ホルダー」バーを配置し、そこに「ヘッダー」要素と「通知」要素をネストすることです。

例えば：

CSS

#holder {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}

#header, .notify{
    //what ever styles you have
    //position: relative or static
}

HTML

<div id="holder">
    <div id="header">...</div>
    <div class="notify">...</div>
</div>

編集

作業例: http://jsfiddle.net/Q6CWv/

アップデート

.notifyJQuery を使用している場合、要素にスライド ダウン効果を追加するのはかなり簡単です。

$('.notify').slideDown();

作業例: http://jsfiddle.net/Q6CWv/1/

于 2012-05-15T07:36:54.370 に答える
3

@MyHeadHurts による回答は多少役に立ちましたが、通知がポップアップしたときにヘッダー バーと重なっているか、通知が表示されるまでヘッダー バーがポップアップしないようにしたため、最適な解決策ではありませんでした。提案されたように、それらを別々のdivに入れましたが、これは私のせいかもしれません。

私の解決策は、ポップダウン通知の JavaScript に入り、「トップ」の値をページの高さの 3% に変更することでした。これは完全に機能するようになりましたが、極端なレベルのズームが適用されている場合、ヘッダーと通知バーが正しく整列しません。

于 2012-05-23T05:48:05.013 に答える