网页滚动时让某个元素不超出页面顶部
作者:飞入蓝天 来源: 十二维官网 人气:122 类型: 付费 价格:¥1 所属课程:HTML/DIV/CSS精讲    
本文档有配套视频,购买本文档或加入该课程后可播放!

允许运行Flash播放器吗?如未安装,请先安装Flash Player(版本: 11.4.0)或更高版本.

思路页面滚动时,动态调整元素的位置和相关样式。可以将其封装为一个函数,然后对需要的元素绑定该函数。

例如下面的效果:

当页面滚动后,浮动区域不会超出顶部,但其他内容照常往上滚动。

Html源码如下:

<html> 
<script src='jquery-1.12.4.min.js'></script> 
<style>
  td{
     vertical-align:top;
  }
</style>
<body>
<table><tr><td>
1.其他内容<br/>
2.其他内容<br/>
3.其他内容<br/>
4.其他内容<br/>
5.其他内容<br/>
6.其他内容<br/>
7.其他内容<br/>
8.其他内容<br/>
9.其他内容<br/>
10.其他内容<br/>
11.其他内容<br/>
12.其他内容<br/>
13.其他内容<br/>
14.其他内容<br/>
15.其他内容<br/>
16.其他内容<br/>
17.其他内容<br/>
18.其他内容<br/>
</td>
<td>
   <br/>
   <br/>
   <br/>
   <div style="background-color:#0f0; margin-left:200px; width:300px; height:100px;" id="popArea">浮动区域</div>
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">   
$(function() { 
 	  $("#popArea").smartFloat(); 	   	 
});

本文为付费文档,请购买或加入所属课程查阅全部内容!

评论

正在加载评论...
提交评论

  •  1. html简介 试看
  •  2. 一个简单的网页 试看
  •  3. 什么是网页标签的属性 试看
  •  4. html注释 试看
  •  5. head标签的内部标签 试看
  •  6. h标题标签
  •  7. p段落标签和br换行标签
  •  8. a超级链接标签
  •  9. img图像标签
  •  10. select下拉标签
  •  11. font文本标签及文本格式化类标签
  •  12. table表格标签
  •  13. ul,ol列表标签
  •  14. div、span标签
  •  15. form表单标签
  •  16. html标签的事件
  •  17. iframe框架标签
  •  18. pre预格式化标签
  •  19. html的三种样式(CSS)形式
  •  20. css语法和常用选择器
  •  21. CSS常用属性
  •  22. div和css布局的常用技巧
  •  23. 典型网站的div+css布局形式
  •  24. 网页滚动时让某个元素不超出页面顶部
  •  25. 解决JQuery UI中tabs()方法与HTML 标签冲突
  •  26. CSS3使用table-cell实现div里的内容水平和垂直居中
十二维网, 版权所有©2005-2018
电话:15013459492 (宋生)  
Email:wave12@126.com
深圳总部:深圳市福田区八卦四路先科机电大厦6楼
网站备案:粤ICP备10018904号