页面滚动头部显示隐藏

最新推荐文章于 2022-08-05 06:41:46 发布

BUG=NULL

最新推荐文章于 2022-08-05 06:41:46 发布

阅读量1.1k

点赞数

文章标签： html css jquery

本文链接：https://blog.csdn.net/hx19990308/article/details/105945744

版权

1.首先引入jquery.min.js

	<meta charset="utf-8">
	<title></title>
	<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		a{
			color: #333333;
			text-decoration: none;
		}
		.w1400 {
			width: 1400px;
			margin: 0 auto;
		}

		.clearfix::after {
			content: '';
			display: block;
			clear: both;
		}

		nav {
			background-color: rgba(1, 1, 1, 0.1);
			height: 70px;
			line-height: 70px;
			position: fixed;
			top: 0;
			width: 100%;
		}

		.nav_warp {
			display: flex;
			justify-content: space-between;
			position: relative;
		}

		.nav_right ul li {
			list-style: none;
			float: left;
			padding-right: 20px;
			position: relative;
			cursor: pointer;
		}

		.nav_logo {
			display: flex;
			align-items: center;
		}

		.nav_logo img {
			width: 160px;
			height: 40px;
		}

		.body_warp {
			background-color: #C4E3F3;
			min-height: 1900px;
		}
		.nav_menu{
			position: absolute;
			width: 130px;
			background-color: rgba(255,255,255,0.8);
			display: none;
			padding: 0 10px;
		}
		.nav_menu a{
			display: block;
		}
		/* 导航栏移入整体的白色 */
		.nav_menu_bakc{
			position: absolute;
			width: 100%;
			background-color: rgba(255,255,255,0.8);
		}
	</style>
</head>
<body>
	<nav>
		<div class="nav_warp w1400">
			<div class="nav_logo">
				<img src="./images/1.img"
			</div>
			<div class="nav_right">
				<ul class="clearfix">
					<li>
						<a href="">网站首页</a>
					</li>
					<li>
						<a href="">网站栏目一</a>
						<div class="nav_menu">
							<a href="">栏目一子栏目一</a>
							<a href="">栏目一子栏目二</a>
							<a href="">栏目一子栏目三</a>
							<a href="">栏目一子栏目四</a>
						</div>
					</li>
					<li>
						<a href="">网站栏目二</a>
						<div class="nav_menu">
							<a href="">栏目二子栏目一</a>
							<a href="">栏目二子栏目二</a>
							<a href="">栏目二子栏目三</a>
							<a href="">栏目二子栏目四</a>
						</div>
					</li>
					<li>
						<a href="">网站栏目三</a>
						<div class="nav_menu">
							<a href="">栏目三子栏目一</a>
							<a href="">栏目三子栏目二</a>
							<a href="">栏目三子栏目三</a>
							<a href="">栏目三子栏目四</a>
						</div>
					</li>
					<li>
						<a href="">网站栏目四</a>
						<div class="nav_menu">
							<a href="">栏目四子栏目一</a>
							<a href="">栏目四子栏目二</a>
							<a href="">栏目四子栏目三</a>
							<a href="">栏目四子栏目四</a>
						</div>
					</li>
					<li>
						<a href="">网站栏目五</a>
						<div class="nav_menu">
							<a href="">栏目五子栏目一</a>
							<a href="">栏目五子栏目二</a>
							<a href="">栏目五子栏目三</a>
							<a href="">栏目五子栏目四</a>
						</div>
					</li>
				</ul>
			</div>
			<!-- 导航栏移入整体的白色 -->
		</div>
	</nav>
	<div class="body_warp">

	</div>
</body>
<script type="text/javascript">
	$(function() {
		// 页面卷曲导航栏显示隐藏
		var b_height = 0; //页面高度
		var scroll = 0;//卷曲高度
		$(window).scroll(function() {
			scroll = $(window).scrollTop();//卷曲高度
			if (scroll > b_height) { //当页面卷曲的高度大与页面高度时
				$('nav').slideUp(200);
			} else {
				//当页面高度大于页面卷曲高度时
				$('nav').slideDown(200);
			}
			setTimeout(function() {
				b_height = scroll //把页面的卷曲高度实时赋值给页面高度  获取最新页面高度
			})
		})
		// 导航栏子栏目移入显示隐藏
		$('.nav_right ul li').mouseenter(function(){
			$(this).find('.nav_menu').stop().slideDown(400);
		})
		$('.nav_right ul li').mouseleave(function(){
			$(this).find('.nav_menu').stop().slideUp(400);
		})
		$('.nav_menu').click(function(){
			$(this).css('display','none')
		})
	})
</script>