Question

有没有办法在任何网页的顶部插入通知栏（类似于Stack Overflow中的那些），而页面本身不需要任何特殊代码？我正在寻找一个CSS样式的片段，或者，如果有必要，一个Javascript示例。它不需要任何特殊的动画甚至是密切的链接，但它确实需要在页面顶部为自己腾出空间。

编辑：阅读最后一部分： 但它确实需要在页面顶部为自己腾出空间。 我知道如何将元素放在顶部一个页面以及如何使它保持在窗口，但是什么是可靠的方式来移动页面的其余部分以适应它，最好不需要使用Javascript？

Answer 1

使用CSS固定位置

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

使用javascript

显示它

如果您希望默认情况下在页面顶部留出空间，请使用

visibility: hidden;

而不是

display:none;

顺便说一下，它在IE6＆lt;

中不起作用

Answer 2

你可以用一些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';

Answer 3

...你可以随时使用jquery使其成为fadeIn或fadeOut。

示例：

$（'a'）。click（function（）{ $（ '＃条'）淡入（）; }）;

栏中的css必须是“display：none”，这样jquery就可以在想要的时候淡出它。此外，您需要在一段时间后设置条的淡出超时。

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

Answer 4

你可以设置overflow：隐藏在body元素上，然后依赖于IE6的绝对定位以及position：fixed for modern browsers。可能需要修补百分比（99/100％）。

动态在标头中创建站点顶部通知栏

4 个答案: