2

ページ自体に特別なコードを必要とせずに、Web ページの上部に通知バーを挿入する方法はありますか (スタック オーバーフローにあるものと同様)。CSS スタイルのスニペット、または必要に応じて Javascript の例を探しています。特別なアニメーションや閉じるリンクは必要ありませんが、ページの上部にスペースを確保する必要があります。

編集: 最後の部分を読んでください:ただし、ページの上部にスペースを空ける必要があります。ページの上部に要素を配置する方法と、ウィンドウ内にとどめる方法は知っていますが、ページの残りの部分を下に移動して、できればJavascriptを使用せずにそれを収容するための信頼できる方法は何ですか?

4

4 に答える 4

3

CSS固定位置を使用する

#bar
{
    position: fixed;
    top:0px;left:0px;width:100%;
    display:none;
}

javascriptで見えるようにする

デフォルトでページの上部にスペースが必要な場合は、

visibility: hidden;

それ以外の

display:none;

ちなみに、IE6では動作しません<

于 2009-07-26T13:31:23.197 に答える
1

あなたは少しのjavascriptでそれを行うことができます。

何も重ならないことを保証するには、少し複雑になります。

これはほとんどの場合に役立ちます：

var myElm = document.createElement('div');
myElm.appendChild(document.createTextNode('This is a test'));
document.body.insertBefore(myElm, document.body.firstChild);

ページで使用された場合、これは失敗position: absoluteします。

あなたはこのようにこれを回避することができます。体の中の何かを子ノードに移動することによって：

var myElm = document.createElement('div');
myElm.appendChild(document.createTextNode('This is a test'));

var container = document.createElement('div');
container.style.position = absolute;
container.style.left = '0px';

while (document.body.firstChild)
    container.appendChild(document.body.firstChild);

document.body.appendChild(myElm);
document.body.appendChild(container);
container.style.top = myElm.offsetHeight + 'px';
于 2009-07-26T13:33:36.640 に答える
1

...そして、いつでもjqueryを使用して、フェードインまたはフェードアウトにすることができます。

例：

$('a').click(function() { $('#bar').fadeIn(); });

バーは css で「display:none」にする必要があるため、jquery は必要に応じてバーをフェードインできます。また、バーが一定時間後にフェードアウトするようにタイムアウトを設定することもできます。

...またはそれに似たもの...

于 2009-07-26T13:55:01.187 に答える
0

body要素にoverflow：hiddenを設定してから、最新のブラウザーのposition：fixedに加えて、IE6の絶対位置に依存することができます。パーセント（99/100％）をいじくり回す必要があるかもしれません。

于 2009-07-26T13:33:05.907 に答える