div滚动到顶部时停止

最新推荐文章于 2022-08-12 22:23:59 发布

iteye_17956

最新推荐文章于 2022-08-12 22:23:59 发布

阅读量519

点赞数

分类专栏： Js 文章标签： html

本文链接：https://blog.csdn.net/iteye_17956/article/details/82583959

版权

Js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<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>

iteye_17956

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div滚动到顶部时停止

#banner { background-color: #999; height:50px; width:300px; color:#FFF; font-size:16px; line-height:50px; text-align:center; position:ab...
复制链接

扫一扫