企业网站模板

JS实现自动固定顶部的悬浮菜单栏效果

作者 2021-10-21 86

本文实例讲述了JS实现自动固定顶部悬浮菜单栏效果。分享给大家供大家参考。具体如下:

这是一款自动固定顶部悬浮菜单栏代码,不管你如何拉动滚动条,它会始终显示在网页的最顶部,用作网站的顶级导航或公告之类的比较合适吧。

JS实现自动固定顶部的悬浮菜单栏效果 效果图如下: 适用导航栏距离顶部还有一个div的高度

JS实现自动固定顶部的悬浮菜单栏效果-好哇网

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
//获取导航栏(.nav)到顶部(.header)距离
var ntop =$(".nav").offset().top;
 
//获取导航栏高度
var nheight =$(".nav").outerHeight();
 
//监听向下滑动了多少
var scrollheight = 0;
$(window).scroll(function (){
scrollheight = $(this).scrollTop();
 
//判断是否需要固定导航栏
if(scrollheight >= ntop){
//改变导航栏的position
$(".nav").css({"position":"fixed","top":"0"});
//改变内容的上外边距(.content)
$(".content").css({"margin":nheigth});
}
else{
$(".nav").css({"position":"static"});
$(".content").css({"margin":"0"});
}
});

JS实现自动固定顶部的悬浮菜单栏效果-好哇网

代码二:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>自动固定顶部的悬浮菜单栏代码</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none;}
#content{width:600px;margin:0 auto;border:1px solid #f00;}
ul li.item{width:400px;text-align:center;margin:20px 100px;background:#00f;color:#fff;font-size:14px;font-weight:bold;height:100px;line-height:100px;}
#float_banner{position:absolute;top:0;left:50%;width:900px;margin-left:-450px;height:30px;line-height:30px;text-align:center;background:#000;color:#fff;font-size:14px;font-weight:bold;z-index:2;}
</style>
</head>
<body>
<div id="float_banner">这里是顶部的横幅,随着页面滚动而浮动</div> 
<ul id="content">
 <li class="item">第一块内容</li>
 <li class="item">第二块内容</li>
 <li class="item">第三块内容</li>
 <li class="item">第四块内容</li>
 <li class="item">第五块内容</li>
 <li class="item">第六块内容</li>
 <li class="item">第七块内容</li>
 <li class="item">第八块内容</li>
 <li class="item">第九块内容</li>
 <li class="item">第十块内容</li>
</ul>
<script language="javascript">
var speed = 100;
var scrollTop = null;
var hold = 0;
var float_banner;
var pos = null;
var timer = null;
var moveHeight = null;
float_banner = document.getElementById("float_banner");
window.onscroll=scroll_ad;
function scroll_ad(){
 scrollTop = document.documentElement.scrollTop+document.body.scrollTop;
 pos = scrollTop - float_banner.offsetTop;
 pos = pos/10
 moveHeight = pos>0?Math.ceil(pos):Math.floor(pos);
 if(moveHeight!=0){
  float_banner.style.top = float_banner.offsetTop+moveHeight+"px";
  setTimeout(scroll_ad,speed);
 }
//alert(scrollTop);
}
</script>
</body>
</html>

在线运行:

Tips:You can change the code before run.

点击【分享给朋友】生成专属代理二维码,享受推广消费现金奖励!

发表评论

好哇网,累计帮助1000+用户成功建站,为小微企业提供助力!

立刻开启你的建站之旅

留言咨询

现在加入好哇网,注册一个账号