Nicole McIntyre 发布于

文章来源： 100素材网更新时间： 2014-09-13 20:27:08

固定页面顶部悬浮固定广告代码 jquery固定浮动div 固定浮动代码

<a style="display:none" href="http://www.100sucai.com">www.100sucai.com</a>
        <!DOCTYPE html>
<html>
<head>
<script src="http://www.100sucai.com/js/jquery.js"></script>
<script src="http://www.100sucai.com/img/demo/1336.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
      $(window).stuck();
    });
  </script>
<style>
body {
	height: 3000px;
	margin: 0;
	padding: 0;
}
.green, .blue, .spacer {
	width: 100%;
	text-align: center;
	color: white;
}
.green, .blue {
	height: 200px;
	padding-top: 75px;
}
.green {
	background-color: #379c0a;
}
.blue {
	background-color: #0a0d9c;
}
.spacer {
	height: 140px;
	background-color: #EEE;
}
.margins {
	margin-top: 100px;
	margin-bottom: 50px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<div class="row">
  <div class="spacer"></div>
</div>
<div class="row">
  <div class="columns small-7 stuck margins">
    <div class="blue" style="width:300px; height:100px; margin:0px auto;">margin-top: 100px;<br />
      margin-bottom: 50px;</div>
  </div>
  <div class="columns small-5"> </div>
</div>
<div class="row">
  <div class="spacer"></div>
</div>
<div class="row">
  <div class="columns small-7 stuck margins">
    <div class="green" style="width:300px; height:100px; margin:0px auto;">margin-top: 100px;<br />
      margin-bottom: 50px;</div>
  </div>
  <div class="columns small-5"> </div>
</div>
<div class="row">
  <div class="spacer"></div>
</div>
</body>
</html>

在线演示

浏览次数次

react源码系统 vue源码系统 vue + typeScript源码系统

上一篇文章：仿天猫商城滑动返回顶部网页代码

下一篇文章：图片滚动到浏览器页面顶部后停止滚动的网页前端代码特效

首页

jquery特效

网页素材

网页特效

网站模板

图片素材

仿百度图片滚动到浏览器一定高度后固定悬浮web前端代码素材

推荐阅读：

相关代码：

标签分类