Nicole McIntyre 发布于

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

浮动广告代码 div固定悬浮顶部浮动代码顶部浮动层

<a style="display:none" href="http://www.100sucai.com">www.100sucai.com</a>
        <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="viewport" content="width=device-width">
<style>
body {
	margin: 0;
	padding: 10px;
}
#header {
	height: 100px;
	margin: 0 0 10px;
	background: lightgray;
}
.content {
	position: relative;
	float: right;
	width: 100%;
	height: 600px;
	margin: 0 0 10px -110px;
}
.side {
	float: left;
	width: 100px;
	height: 300px;
	margin: 0 10px 0 0;
	background: indigo;
}
.main {
	height: 600px;
	margin-left: 110px;
	background: lightgray;
}
#footer {
	clear: both;
	height: 100px;
	background: lightgray;
}
</style>
<title>jquery.fixer.js | Fix elements as `position:sticky` do.</title>
</head>
<body>
<div id="header"></div>
<div class="content">
  <div class="side" style="position: absolute; top: 300px;"></div>
  <div class="main"></div>
</div>
<div class="content">
  <div class="side" style="position: absolute; top: 300px;"></div>
  <div class="main"></div>
</div>
<div class="content">
  <div class="side" style="position: absolute; top: 0px;"></div>
  <div class="main"></div>
</div>
<div id="footer"></div>
<script src="http://www.100sucai.com/js/jquery.js"></script>
<script src="http://www.100sucai.com/img/demo/1334.js"></script>
<script>
        $('.side').fixer({
            gap: 10
        });
    </script>
</body>
</html>

在线演示

浏览次数次

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

上一篇文章： jQuery固定菜单页面滑动到指定位置网页锚点特效代码

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

首页

jquery特效

网页素材

网页特效

网站模板

图片素材

div滚动到浏览器顶部固定并由下一个div替换的jQuery网页代码素材

推荐阅读：

相关代码：

标签分类