2

有没有一种方法可以在任何网页的顶部插入通知栏（类似于 Stack Overflow 上的通知栏），而不需要页面本身的任何特殊代码？我正在寻找 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

...并且您始终可以使用 jquery 使其淡入或淡出。

例子：

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

该栏必须在 css 中为“display:none”，以便 jquery 可以在需要时将其淡入。此外，您还想为栏设置超时，使其在一定时间后淡出。

...或类似的东西...

于 2009-07-26T13:55:01.187 回答
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 回答
0

您可以在 body 元素上设置 overflow:hidden，然后依赖于 IE6 的绝对定位以及现代浏览器的 position:fixed。可能需要修改百分比（ 99/100% ）。

于 2009-07-26T13:33:05.907 回答