jQuery置顶导航

Html的代码

<body>
		<div class="logo_bar">顶部 logo</div>
		<div class="menu">置顶菜单</div>
		<div class="menu_pos"></div>
		<div class="down_con">
			<p style="color:red">英莱特网站主内容</p>
			<p>网站主内容</p>
			<p>网站主内容</p>
			<p>网站主内容</p>
			<p>网站主内容</p>
		</div>
		<a href="javascript:;" class="totop"></a>
	</body>

Css的代码

<style type="text/css">		
			 body {
				margin: 0px;
			}
			
			.logo_bar {
				width: 960px;
				height: 200px;
				background: url(img/bg3.jpg) no-repeat center;
				background-size: 100%, 100%;
				margin: 0 auto;
			}
			
			.menu,
			.menu_pos {
				width: 960px;
				height: 50px;
				margin: 0 auto;
				background-color: gold;
				text-align: center;
				line-height: 50px;
			}
			
			.menu_pos {
				display: none;
			}
			
			.down_con {
				width: 960px;
				height: 1800px;
				margin: 0 auto;
			}
			
			.down_con p {
				margin-top: 100px;
				text-align: center;
			}
			
			.totop {
				width: 50px;
				height: 50px;
				background: url(img/top.jpg) center center no-repeat #000;
				background-size: 100%, 100%;
				border-radius: 50%;
				position: fixed;
				right: 50px;
				bottom: 50px;
				display: none;
			}
		</style>

jQuery的代码

<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$(window).scroll(function(){
					var nowTop=$(document).scrollTop();
					if(nowTop>200){
						$('.menu').css({
							 position:'fixed',
							 left:'50%',
							 top:0,
							 marginLeft:-480
						});
						$('.menu_pos').show();
					}
					else{
						 $('.menu').css({
						 position:'static', 
						 marginLeft:'auto'
						 });
						 $('.menu_pos').hide();
					}
					 if(nowTop>400){
						$('.totop').fadeIn();
						 }
						else{
						 $('.totop').fadeOut();
					 }
				})
				$('.totop').click(function(){
					$('html,body').animate({'scrollTop':0});
				})
			})
		</script>

猜你喜欢