增加弹性盒模型

Yanbin Ma · Yanbin Ma · commit 397f5fbd7405 · 2014-10-05T22:46:30.000+08:00
diff --git a/demo/scroll-top.html b/demo/scroll-top.html
@@ -4,8 +4,8 @@
 	<meta charset="UTF-8">
 	<title>Scroll Top</title>
 	<style>
-	.container { margin: 0 auto; width: 980px; height: 1000px; background-color: #f9f9f9; }
-	.scrolltop { position: fixed; bottom: 10px; left: 50%; margin-left: 500px; width: 30px; height: 30px; background-color: #fae321; }
+	.container { margin: 0 auto; width: 980px; height: 1000px; }
+	.scrolltop { position: fixed; bottom: 10px; left: 50%; margin-left: 500px; width: 30px; height: 30px; background-color: #3d9970; cursor: pointer; }
 	</style>
 </head>
 <body>
diff --git a/demo/sticky.html b/demo/sticky.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Sticky</title>
+	<style>
+	body { margin: 0; }
+	.container-fluid { height: 150px; background-color: #39cccc; }
+	.container { margin: 0 auto; width: 980px; display: flex; }
+	.container .main { width: 800px; flex: 1; }
+	.container .main .section { height: 400px; }
+	.container .sidebar { padding: 20px; flex: 0 0 180px; }
+	.container .sidebar .elevator { height: 300px; border: 1px soild #aaaaaa; border-radius: 3px; }
+	.sticky { position: fixed; top: 0; }
+	</style>
+</head>
+<body>
+	<div class="container-fluid" id="heading"></div>
+	<div class="container">
+		<div class="main">
+			<div class="section" style="background-color: #0074d9"></div>
+			<div class="section" style="background-color: #ff4136"></div>
+			<div class="section" style="background-color: #01ff70"></div>
+			<div class="section" style="background-color: #001f3f"></div>
+			<div class="section" style="background-color: #f012be"></div>
+		</div>
+		<div class="sidebar"></div>
+	</div>
+	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
+	<script type="text/javascript">
+	$(function () {
+
+		$(window).on('scroll', function () {
+			if ($(this).scrollTop() > $('#heading').offset().top) {
+				$('.sidebar').addClass('sticky');
+			} else {
+				$('.sidebar').removeClass('sticky');
+			}
+		});
+	})
+	</script>
+</body>
+</html>
