html中怎么把导航栏置顶,js与css实现简单的网页菜单置顶效果

在很多网站的网页当中，当鼠标将页面往下拉动时，经常可以见到悬浮在页面顶部的菜单导航栏，这是怎样实现的呢？

以下简单介绍了js与css代码实现玩也菜单的悬浮置顶效果.

css代码如下：

#dh-xf {

position: fixed;

z-index: 9999;

top: 0;

background: #333;

opacity: 0.8;

width: 100%;

_position: absolute;

_top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);

-webkit-box-shadow: 0px 0px 9px 0px;

box-shadow: 0px 0px 9px 0px;

height: 51px;

}

#bavfd {

width: 1132px;

margin: 0 auto;

height: 66px;

}

#bavfd li {

float: left;

display: block;

width: 100px;

height: 50px;

-webkit-box-shadow: 0px 0px 111px 0px #FFFFFF;

box-shadow: 0px 0px 111px 0px #FFFFFF;

}

• 在线工具
• 图片处理

填充一个宽度为100%，高度为1600px超出了正常屏幕分辨率高度的网页，让页面在网页浏览器中出现上下滑动条。

然后创建一个id为dh-xf的菜单栏元素，将其css代码按照如上所述，然后鼠标拖动页面滑动条即可看见悬浮的导航菜单效果。

如果我们想要这个菜单默认隐藏，拖动后显示，重新拖动到最上边菜单自动消失该怎样实现呢？

这时候，就需要加上一些js代码：

$(window).scroll(function (e) {

var s = $(document).scrollTop();

if (s > 100) {

$("#dh-xf").show();

} else {

$("#dh-xf").hide();

};

});

在上方id为dh-xf的元素css样式中添加display: none;默认隐藏浮动的菜单导航样式,当鼠标拖动距离页面顶部100px时，显示菜单，当距离顶部小于100px时则创建的浮动菜单自动关闭隐藏。