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时则创建的浮动菜单⾃动关闭隐藏。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。