达到一定距离导航永远跟着顶部走

最新推荐文章于 2022-09-17 10:13:07 发布

GodTyler

最新推荐文章于 2022-09-17 10:13:07 发布

阅读量436

点赞数

分类专栏： html 文章标签：导航导航在顶部

本文链接：https://blog.csdn.net/GodMutianle/article/details/82801338

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html代码如下 :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<body>
		<div style="height: 250px;">
			
		</div>
		<div class="nav-box nav-hide normal-nav-box" id="nav-box">
			<div class="auto">
				<div class="orientation-nav-box">
					<ul class="banner-nav clearfix" style="width: auto; right: 277px;background: #1EACDF;">
						<li style="margin-left: 40px;"><a href="javascript:;" class="active">特点与优势</a></li>
						<li style="margin-left: 40px;"><a href="javascript:;">优势对比</a></li>
						<li style="margin-left: 40px;"><a href="javascript:;">产品功能</a></li>
						<li style="margin-left: 40px;"><a href="javascript:;">推荐套餐</a></li>
						<li style="margin-left: 40px;"><a href="javascript:;">节点介绍</a></li>
						<li style="margin-left: 40px;"><a href="javascript:;">客户案例</a></li>
						<li style="margin-left: 40px;"><a href="javascript:;">常见问题</a></li>
					</ul>
				</div>
			</div>
			<div id="ccc" style="height: 76px; position: absolute; left: 150px; display: none;">
				<ul>
					<li>ceshi</li>
				</ul>
			</div>
	 		<div id="xxx" style="height: 76px; position: absolute; left: 85%; display: none;">
				<ul>
					<li>123</li>
					<li>123</li>
					<li>123</li>
					<li>123</li>
					<li>123</li>
				</ul>
			</div>
		</div>
			<div style="height: 1500px;">
				
			</div>
		<script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
		
		<script type="text/javascript">
			var onav = document.getElementById("nav-box");
			//获取某元素距离顶部的高度
			var mTop = document.getElementsByClassName('nav-box')[0].offsetTop;
			//减去滚动条的高度
			var sTop = document.body.scrollTop;
            //算出来的是 某个元素与顶部的距离
			var result = mTop - sTop;
			
			$(window).scroll(function(){
				if($(document).scrollTop()>=result){
					$("#ccc").css({"display":"block"});
					$("#xxx").css({"display":"block"});
					$("#nav-box").css({"position":"fixed","z-index":999,"left":"0","right":"0","top":"0","margin":"atuo"});
				}else{
					$("#nav-box").css({"position":"static"});
					$("#ccc").css({"display":"none"});
					$("#xxx").css({"display":"none"});
				}
			});
		</script>
		
	</body>
</html>

css 如下:

.div{display: block;}
* {margin: 0;padding: 0;box-sizing: border-box;list-style: none;}
li{display: list-item;}
.banner-nav {position: absolute;top: 0px;right: 130px;height: 76px;}
.banner-nav li {height: 74px;margin-left: 40px;float: left;}
.auto {
    margin: 0 auto;
    min-width: 1200px;
    max-width: 1200px;
}
.orientation-nav-box {
    position: relative;
}
.banner-nav {
    right: 177px;
    transition: all ease .8s;
}
.banner-nav {
    position: absolute;
    top: 0px;
    right: 130px;
    height: 76px;
}
::selection {
    background: #1EACDF;
    color: #fff;
}

element.style {
}
.nav-box.normal-nav-box {
	
    bottom: 0;
    background-color: transparent;
}
.nav-hide {
    box-shadow: none;
}
.nav-box {
    width: 100%;
    height: 76px;
    background-color: #36393d;
    box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.2);
	
}
.nav-box.normal-nav-box {
    
    bottom: 0;
    background-color: transparent;
}
.pos{
	position: fixed !!important;
    z-index: 999;
    top: 0;
}

主要的是position: fixed !!important; 这个句话

GodTyler

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
达到一定距离导航永远跟着顶部走

html代码如下 :&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;tit
复制链接

扫一扫