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

最新推荐文章于 2021-06-07 15:14:48 发布

东成熙就

最新推荐文章于 2021-06-07 15:14:48 发布

阅读量3.2k

点赞数

分类专栏： JQuery Javascript HTML5 JQuery插件文章标签：顶部固定显示某模块的标题栏在滚动时固定显示到底部时显示底部banner 回到顶部

本文链接：https://blog.csdn.net/phpfer/article/details/49621601

版权

Javascript 同时被 3 个专栏收录

33 篇文章 1 订阅

订阅专栏

HTML5

18 篇文章 0 订阅

订阅专栏

JQuery插件

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>