置顶菜单案例

最新推荐文章于 2019-04-22 09:01:20 发布

yjx_43750162

最新推荐文章于 2019-04-22 09:01:20 发布

阅读量109

点赞数

本文链接：https://blog.csdn.net/weixin_43750162/article/details/89046223

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.head{
				width: 960px;
				height: 400px;
				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;
			}
			.foot{
				width: 960px;
				height: 1800px;
				margin: 0 auto;
			}
			.foot p{
				margin-top: 100px;
				text-align: center;
			}
			.totop{
				width: 50px;
				height: 50px;
				background: blue;
				border-radius: 50%;
				position: fixed;
				right: 50px;
				bottom: 50px;
				display: none;
			}
		</style>
		<script type="text/javascript" src="jquery-1.7.1.min.js" ></script>
		<script type="text/javascript">
			$(function(){
				$(window).scroll(function(){
					var srcTop=$(document).scrollTop();
					if(srcTop>400){
						$('.menu').css({
							position:'fixed',
							left:'50%',
							top:0,
							marginLeft:-480
						})
						$('.menu_pos').show();
					}else{
						$('.menu').css({
							position:'static',
							margin:'auto'
						})
						$('.menu_pos').hide();
					}
					if(srcTop>600){
						$('.totop').fadeIn();
					}else{
						$('.totop').fadeOut();
					}
				})
				$('.totop').click(function(){
					$('html').animate({'scrollTop':0});
				})
			})
		</script>
	</head>
	<body>
		<div class="head">头部Logo</div>
		<div class="menu">置顶菜单</div>
		<div class="menu_pos"></div>
		<div class="foot">
			<p style="color: red;">网站主内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
			<p>内容</p>
		</div>
		 <a href="javascript:;" class="totop"></a>
	</body>
</html>