您的位置：首页 > 其它

position:fixed和scroll实现div浮动【示例】

2014-03-10 15:49 183 查看

前言

　　在自己建站的过程中，要实现一个div随滚动条浮动的效果，网上找了些示例不太好用，还是自己动手，丰衣足食，写的不好请大家谅解，毕竟我不是搞前端的，因为自己建站毕竟每一步都必须自己来，这边只是做个记录。

position:fixed

　　实现浮动主要有个css属性：position:fixed，从单词上就知道是固定的意思，这边就用我博客的公告栏做个示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.canfloat
{
position: fixed;
top: 10px;
}
.newsItem
{
width: 220px;
float: right;
padding: 0px 0px 5px;
margin-bottom: 2em;
}
.newsItem .catListTitle
{
text-align: left;
padding: 5px 10px;
border: 1px solid #CCC;
background: none repeat scroll 0% 0% #F0F0F0;
}
.catListTitle
{
font-weight: bold;
line-height: 1.5em;
font-size: 110%;
margin-top: 15px;
margin-bottom: 10px;
border-bottom: 1px solid #000;
text-align: center;
}
</style>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(window).scroll(function () {
var ref_min = $("#sign")[0];
if (!ref_min) return;
var scroll_top = $(window).scrollTop();
var ref_height_min = ref_min.offsetTop + $("#floatdiv")[0].offsetHeight;
if (scroll_top > ref_height_min) {
$("#floatdiv").addClass("canfloat");
} else {
$("#floatdiv").removeClass("canfloat");
}
});
});
</script>
</head>
<body>
<div>
<div style="height: 2500px; float: left;">
</div>
<div class="newsItem">
<div style="height: 500px;">
</div>
<div>
我只是占位的
</div>
<div id="sign" title="我只是记录的">
</div>
<div id="floatdiv" class="canfloat">
<h3 class="catListTitle">
公告</h3>
<div id="blog-news">
<a style="padding-right: 20px;" href="http://wpa.qq.com/msgrd?v=3&uin=624541997&site=qq&menu=yes"
target="_blank">
<img style="vertical-align: bottom; border: 0px" src="http://wpa.qq.com/pa?p=1:624541997:13"
alt="点击这里给我发消息"></a>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
id="honehoneclock" align="middle" height="70" width="160">
<param name="allowScriptAccess" value="always">
<param name="movie" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#ffffff">
<param name="wmode" value="transparent">
<embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf"
quality="high" bgcolor="#ffffff" name="honehoneclock" allowscriptaccess="always"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"
align="middle" height="70" width="160"></object>
<div id="profile_block">
昵称：<a href="http://home.cnblogs.com/u/xishuai/">田园里的蟋蟀</a><br>
园龄：<a href="http://home.cnblogs.com/u/xishuai/" title="入园时间：2012-08-07">1年6个月</a><br>
粉丝：<a href="http://home.cnblogs.com/u/xishuai/followers/">137</a><br>
关注：<a href="http://home.cnblogs.com/u/xishuai/followees/">10</a><div id="p_b_follow">
</div>
</div>
<script type="text/javascript">                        loadBlogNews();</script>
</div>
</div>
</div>
</div>
</body>
</html>

View Code
　　示例下载：scrollTop.rar

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航