当前位置：网站首页>Slide the navigation fixed head upwards

Slide the navigation fixed head upwards

2022-06-10 12:16:00 【000000001111】 

<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> Slide the navigation fixed head upwards </title>
		<style type="text/css">
			* {
    
				margin: 0;
				padding: 0;
			}

			.title {
    
				width: 100%;
				height: 20px;
				margin-bottom: 30px;
			}

			.nav {
    
				width: 100%;
				height: 20px;
				background: #CDDC39;
			}

			.main {
    
				width: 100%;
				height: 2000px;
			}

			/* Realization ie6 I won't support it fixed Method */
			.navFixed {
    
				position: fixed;
				left: 0;
				top: 0;
				_position: absolute;
				top: expression((offsetParent.scrollTop)+0);
				z-index: 2;
			}
		</style>
	</head>
	<body>
		<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function() {
    
				var headHeight = $(".title").height() + 30; //title Height plus margin-bottom value 
				var nav = $(".nav");
				$(window).scroll(function() {
    
					if ($(this).scrollTop() > headHeight) {
    
						nav.addClass("navFixed");
					} else {
    
						nav.removeClass("navFixed");
					}
				})
			})
		</script>
		<div class="title">
			 Fixed to the head 
		</div>
		<div class="nav"></div>
		<div class="main">
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			<br>
			 Slide the Yellow slider up to fix it to the top ~
		</div>
	</body>
</html>

Insert picture description here

原网站

版权声明
本文为[000000001111]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/161/202206101155030964.html

边栏推荐

猜你喜欢

随机推荐