搜 索

js与css实现简单的网页菜单置顶效果

编辑:QTOOL.NET日期:2020-03-09294

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

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

css代码如下:

<style type="text/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;

}

</style>

<div id="dh-xf">

  <ul id="bavfd" class="pc-overflow">

    <li>在线工具</li>

    <li>图片处理</li>

  </ul>

</div>

<div style="width: 100%; height: 1600px"></div>

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

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

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

这时候,就需要加上一些js代码:

<script type="application/javascript">

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

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

  if (s > 100) {

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

  } else {

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

  };

});

</script>

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

TAG标签:js网页布局
此文章由QTOOL.NET编辑
最新文章

热门标签