顶部固定显示;某模块的标题栏在滚动时固定显示;到底部时显示底部banner;回到顶部。4个效果

18 篇文章 0 订阅
8 篇文章 0 订阅


主要实现4个效果,

1. 顶部导航菜单固定显示。

2. 某模块的标题栏在滚动时固定显示在顶部,回滚时原来位置显示。

3. 滚动到最底部时,显示底部banner。

4. 回到顶部。之前有了... http://blog.csdn.net/phpfer/article/details/49473549

源码,

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--
	<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link href="favicon.ico" rel="Bookmark" type="image/x-icon" />
	-->
	<meta name="Generator" content="EditPlus®">
	<meta name="Author" content="">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
	<!-- 注意: 如果通过 file://  引入 Respond.js 文件,则该文件无法起效果 -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->
	<title>Bootstrap Demo</title>
	<style type="text/css">
		*{
			font-size:14px;
			font-family:"微软雅黑";
			padding:0;
			margin:0;
		}
		.flowdiv{
			display: table;
			background:red;
			text-align:center;
			padding: 5px;
			position: fixed;
			right: 10px;
			background:#f3f3f3;
			cursor: pointer;
			bottom: 30px;
			z-index:99999;
		}
		li{
			width:50px; 
			heigth:50px;
			background:#f3f3f3;
			text-align:center;
			border:1px solid #333;
			font-weight:bold;
			list-style: none;
			padding:10px;
		}
		li:hover{
			background:#fff;
		}
		.footbanner{
			clear:both;
			display:table;
			background:#000;
			height:444px;
			width:1366px;
			text-align:center;
			position: fixed;
			bottom:0;
			z-index:9998;
			/*filter: alpha(opacity = 50); 
			-moz-opacity: 0.5; 
			-khtml-opacity: 0.5; 
			opacity: 0.5; 
			*/
			color:green;
			display:none;
		}
	.nav {
			background:#f3f3f3;
			width:1366px;
			text-align:center;
			height:65px;
			position:fixed;
			top:0;
			left:0;
			padding-top:5px;
		}
		.nav ul{
			text-align:center;
			margin-top:20px;
		}
		.nav ul li{
			display:inline;
			margin-right:10px;
			margin-top:10px;
			width:auto;
		}
		#modTitle{
			height:30px; 
			width:300px;
			background:#ddd;
		}
		.forModFix{
			position:fixed;
			top:0;
		}
	</style>
</head>
<body>
	<div class="nav">
		<ul>
			<li>首页</li>
			<li>商品展示</li>
			<li>公司介绍</li>
			<li>联系我们</li>
			<li id="test1">Loading</li>
			<li id="test2">Loading</li>
			<li id="test3">Loading</li>
		</ul>
	</div>

	<div style="margin-top:70px;">
		head<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />
		<div style="width:300px;background:#f1f1f1;float:right">
			<div id="modTitle">
				这是固定显示在顶部的Title
			</div>
			<div>
				<p>向下滚动超过该模块时,上边的标题部门固定显示在顶部。向上回滚时再返回到原来的位置显示。</p>
				<p>向下滚动超过该模块时,上边的标题部门固定显示在顶部。向上回滚时再返回到原来的位置显示。</p>
				<p>向下滚动超过该模块时,上边的标题部门固定显示在顶部。向上回滚时再返回到原来的位置显示。</p>
			</div>
		</div>
		+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />foot<br />
	</div>
	
	<div id="footbanner" class="footbanner">
		<img src="http://www.poluoluo.com/xinshang/UploadFiles_4833/201503/2015030920163754.jpg" width="1366" height="444" alt="" />
	</div>

	<div class="flowdiv">
		<li>Home</li>
		<li id='toTop' style="border-top:0;display:none">Top</li>
	</div>

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	var oriosTop = $("#modTitle").offset().top; //元素距浏览器最上边的距离
	$(window).scroll( function(){
		
		var scrollValue=$(window).scrollTop(); //元素相对滚动条顶部的距离
		if (scrollValue > 200){
			$('#toTop').slideDown(); //显示回到顶部
		} else {
			$('#toTop').slideUp();	//隐藏回到顶部
		}

		//向下滚动时,某模块标题固定在顶部显示;向上回滚时,恢复到原来位置。
		if (scrollValue >= oriosTop){
			$("#modTitle").addClass("forModFix");
		} else {
			$("#modTitle").removeClass("forModFix");
		}
		
		//当滚到最底部时,显示底部banner
		var docHeight = $(document).height();
		var winHeight = $(window).height();
		if (scrollValue + winHeight == docHeight) //是否到最底部
		{
			$('#footbanner').slideDown('fast');
			//alert('到底了 :)');
		} else {
			$('#footbanner').slideUp('fast');
		}

		$("#test1").html('文档高度document.height:'+$(document).height());
		$("#test2").html('可视高度window.height:'+$(window).height());
		$("#test3").html('滚动条距上边window.scrollTop:'+$(window).scrollTop());	
	});	
	
	//点击回到顶部
	$("#toTop").click(function(){
		//缓慢效果回到顶部
		$('body,html').animate({scrollTop:0},500);
		return false;
		//直接回到顶部
		//window.scroll(0,0);
	});
})
</script>
</body>
</html>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值