如何让CSS导航固定在页面顶端,本来是在底部固定的

html-css019

如何让CSS导航固定在页面顶端,本来是在底部固定的,第1张

#maximg

{z-index:999background:rgba(0, 0, 0, 0.8) none repeat scroll 0 0 !important

filter:Alpha(opacity=80)background:#000width:100%height:50pxposition:fixedtop:0

_position:absolute

_background-attachment:fixed

_top:expression(eval(document.documentElement.scrollTop))

_bottom:auto}

可能我误会了你的意思,这样的话你只需把z-index改成正值999就行了,你这负值肯定会在页面下面的。

1、新建一个html页面。

2、在html页面上新建三个div标签,分别为这三个div添加class为:header、main、footer。

3、创建style标签用于设置css样式。在title标签下创建一个style标签,然后为header类设置div的高、背景颜色样式。

4、为显示主要内容的main类设置样式。在style标签里设置main类样式的边框、宽、高、背景颜色。

5、设置底部footer的样式。在style标签里添加footer类样式的背景颜色和高度。

6、保存好html文件后使用浏览器查看效果。

7、在浏览器上看到div标签和浏览器存在一些空白的像素,为了去掉这些空白的像素我们需要把body标签设置外边框。

通过js添加滚动事件,当滚动时判断滚动条距离顶端的高度是否达到固定导航条所需的高度

如果达到,为导航条添加position:fixed属性,否则去掉该属性

需要监听scroll事件,scrollY为滚动条距顶端距离,在监听函数里计算滚动条位置即可