<html>
<head>
<style>
#banner {
background-color: #999;
height:50px;
width:300px;
color:#FFF;
font-size:16px;
line-height:50px;
text-align:center;
position:absolute; //这个属性很关键！
top:80px;
left:10px;
}
</style>
<script src="JS/jquery-1.10.2.min.js"></script>
<script>
$(function() {
var elm = $('#banner');
var startPos = $(elm).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(elm).css('position',((p) > startPos) ? 'fixed' : 'absolute'); //如果当前页面的<strong>顶部</strong>位置大于目标元素的<strong>顶部</strong>位置，那么目标元素的position属性为fixed，否则为absolute
$(elm).css('top',((p) > startPos) ? '0px' : '');
});
});
</script>
</head>
<body>
<div style="height:500px"></div>
<div id="banner">this is the moving and floating banner.</div>
<table width="200" border="1">
<tr>
<th scope="col">ID</th>
<th scope="col">Text</th>
</tr>
<tr height="300">
<td>a</td>
<td> </td>
</tr><tr height="300">
<td>a</td>
<td> </td>
</tr><tr height="300">
<td>a</td>
<td> </td>
</tr>
</table>
</body>
</body>
</body>
</html>
分享到：
相关推荐
这个例子是把div固定在设定的地方，不跟着滚动条滚动！
div滚动条 带滚动条的div div滚动条样式div滚动条 带滚动条的div div滚动条样式
div随着滚动条滚动，但是到了顶部，便不随着滚动了
DIV滚动悬浮层，页面滚动条滚动，悬浮层保持位置不变！
jQuery实现将div的滚动条滚动到指定位置 jQuery实现将div的滚动条滚动到指定位置
使用Javascript实现了滚动页面时，DIV到达顶部时固定在顶部。在IE下效果有点闪，具体代码如下，感兴趣的朋友可以参考下哈
优秀的的div滚动条优化代码 优化之后不在影响滚动功能的情况下使div的滚动条变为半透明的...
div滚动条样式一览-div+css设计网，div滚动条，多个div滚动条样式
jquery滚动到顶部底部是一款简单的滚动到顶部底部控制jQuery插件。是一个很实用的功能，他能帮助新手和高级开发者们创造美好的用户体验。 jquery滚动到顶部底部仅向上效果： 点击查看演示： jquery滚动到顶部...
浮动div 页面两边滚随滚动条滚动的DIV div滚动
网页局部div随滚动条置顶滚动 效果很好，跟普通的滚动不太一样，没有延迟。
div随滚动条上下滚动,div随滚动条上下滚动div随滚动条上下滚动div随滚动条上下滚动
主要为大家详细介绍了js实现鼠标滑动到某个div禁止滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
当滚动条滑到最低端显示div
当某一div块区域，设定了固定高度，和overfloat滚动后，要进行滚动到区域底部后的加载或其他操作时，需要知道何时到达底部，此代码解决了这个问题
单个div滚动条初始化到最低位置
div 图片滚动 支持div ul li 多行滚动 自右向左滚动
jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jsDIV滚动条jsDIV滚动条jsDIV滚动条
如何让DIV固定在页面的某个位置而不随着滚动条随意滚动
纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.