position:fixed和scroll实现div浮动【示例】
前言
在自己建站的过程中，要实现一个div随滚动条浮动的效果，网上找了些示例不太好用，还是自己动手，丰衣足食，写的不好请大家谅解，毕竟我不是搞前端的，因为自己建站毕竟每一步都必须自己来，这边只是做个记录。
position:fixed
实现浮动主要有个css属性：position:fixed，从单词上就知道是固定的意思，这边就用我博客的公告栏做个示例：
上面是从博客园中复制下来的代码，放到本地自己调试，当然大家可以看到好的页面或者效果，可以搞下来研究。上面的效果可以看出样式中加了个position:fixed;属性，公告栏不随着滚动条的滚动而变化位置，其实这个效果也可以满足一些需求。这个默认固定在左上部，我们需要定位在右上部加个right:10px;属性即可：
我们见到有的网站上面的导航条随着滚动条固定在顶部，就是这种方法实现，对于不搞前端的来说可能觉得很难，其实就这么简单。
不要高估别人，低估自己，其实深入内心，很多你自以为很了不起的人，其实也没什么，真是这样。
有点跑偏啊，只是多想了点，对于一些你不曾接触到的领域，觉得很遥远，接触了，你会发现，其实也就这样。
scroll
有时候有这种情况：在指定的地方浮动和不浮动，这种情况只是上面的position:fixed属性就实现不了了，要结合滚动条滚动事件scroll，使用scroll事件需要注意要结合一些属性和方法。
- scrollTop()方法的意思：对象的最顶部到对象在当前窗口显示的范围内的顶边的距离，可以理解为滚动条从上面开始滚动的距离。
- offsetTop属性的意思：当前对象到其上级层顶部的距离，这个是指定对象的。
- offsetHeight属性的意思：当前对象的高度值，这个值是不会随着滚动条变化的。
关于scroll的一些方法和属性不止这些，上面三个是我们要用到的，关于其他的大家可以搜下相关解释，我们看下实现代码。
样式代码和html代码：
.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;
}
<div>
<div style="height: 2500px; float: left;">
</div>
<div class="newsItem">
<div style="height: 500px;">
</div>
<div>
我只是占位的
</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>
js代码：
$(function () {
$(window).scroll(function () {
var ref_min = $("#floatdiv")[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");
}
});
});
scroll_top获取当前滚动条滚动的距离，ref_height_min是开始浮动的距离，大于的话就开始浮动，小于的话就不浮动，代码看起来是没什么问题，我们看下运行效果：
上面的效果基本上没什么问题，但是仔细看下就会发现，浮动框在不该浮动的地方浮动，在该浮动的地方浮动，好像是距离的判断出现问题，问题出在哪？就在ref_min.offsetTop这句代码，如果我们实现的是从顶部开始滚动，这段代码是不会出现问题的，因为ref_min.offsetTop始终保持一致（如果设置浮动框和开始浮动宽的距离顶端高度设置一样），如果不从顶端开始浮动，当开始浮动的时候，浮动框距离顶部的值是一定的，我们想要的应该是变化的，所有就会出现上面的问题。
解决问题
解决上面的问题其实很简单，就是不用浮动框获取距离顶端的高度，用一个标记来记录，我们修改一下上面的代码：
html代码：
<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>
js代码：
$(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");
}
});
});
上面的html只是浮动框上部加了个div标记来记录浮动高度，var ref_min = $("#sign")[0];获取的是标记的浮动高度，而不是浮动框的浮动高度。这样基本上可以解决上面出现的问题，我们看下运行效果：
完整代码：
<!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>
示例下载：scrollTop.rar
position:fixed和scroll实现div浮动【示例】的更多相关文章
- 浮动层固定兼容IE6 position:fixed的最佳解决方案
第一种:css方法 有时候当我们需要把一个元素固定在页面的某个部位,一般都是用css中的“position:fixed;”方法来解决,但是IE6不支持fixed,所以今天分享一个兼容IE6的页面底部固 ...
- 解决 scroll() position:fixed 抖动、导航菜单固定头部(底部)跟随屏幕滚动
一.导航栏或者页脚正常情况下固定在页面的相应位置,当页面滚动后,导航栏或者页脚固定在页面的顶部或者底部的情景 一般就是将该块的代码样式的position设置为fixed.固定在顶部的话,将top设置为 ...
- iphone下元素放在了一个position: fixed的div中无法点击
网上的说法是这样的: iphone的浏览器有这么一个bug, 当你使用锚定或滚动页面后, 你会发现某些东西不能点击了! 如果你的这个“东西”放在了一个position: fixed的div中, 那么你 ...
- Issues with position fixed & scroll（移动端 fixed 和 scroll 问题）
转载请注明英文原文及译文出处 原文地址:Issues with position fixed & scrolling on iOS 原文作者:Remy Sharp译文地址:移动端 fixed ...
- css中position:fixed实现div居中
上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; h ...
- position:fixed div如何居中
div{position:fixed;margin:auto;left:0; right:0; top:0; bottom:0;width:200px; height:150px;}
- div position:fixed后，水平居中的问题
.div{position:fixed;margin:auto;left:0; right:0; top:0; bottom:0;width:200px; height:150px;}
- 使用属性position:fixed的时候如何才能让div居中
css: .aa{ position: fixed; top: 200px; left: 0px; right: 0px; width: 200px; height: 200px; margin-le ...
- 小技巧css解决移动端ios不兼容position:fixed属性，无需插件
移动端开发仿app头部底部固定设置position:fixed,android2.2以上已经实现.但是在ios8以下系统,当小键盘激活时,都会出现位置浮动问题.如图: 如何解决: 查阅资料之后想到一下 ...
随机推荐
- linux shell中不显示路径了,显示为-bash-4.1#的两种解决办法
出现这个问题的原因是因为没有配置.bash_profile的问题,或者是我们不小心清空或删除了.bash_profile文件. 办法一:修改 ~/.bash_profile文件 步骤如下: vim ~ ...
- 初识Scala反射
我们知道,scala编译器会将scala代码编译成JVM字节码,编译过程中会擦除scala特有的一些类型信息,在scala-2.10以前,只能在scala中利用java的反射机制,但是通过java反射 ...
- 疯狂C#~伴随着我的库存管理￥
每次的等待都是期待下一次的勃发!但激进的我非常想和大家学习一些东西,所以特地的分享了一个库存管理, 生活中容易运用的很多,但现在的学业希望能够得到各界人士的帮助!!! 首先:会有几个类来让它们协调 ( ...
- iOS单例详解
单例:整个程序只创建一次,全局共用. 单例的创建 // SharedPerson.h 文件中 + (instancetype)share; // SharedPerson.m 文件中 static S ...
- windows上面捕获声卡数据
转自:http://shanewfx.github.io/blog/2013/08/14/caprure-audio-on-windows/ 前一段时间接到一个任务,需要采集到声卡的输出信号,以便与麦 ...
- .NET程序反汇编JustDecompile 开源
JustDecompile是Telerik公司推出一个免费的.net反编译工具,支持插件,与Visual Studio 集成,能够创建Visual Studio project文件.JustDecom ...
- MyBatis（跨表查询）
1.建立数据库表如下: DROP TABLE IF EXISTS t_demo_user; CREATE TABLE IF NOT EXISTS t_demo_user( userid ), user ...
- Mina入门实例（一）
mina现在用的很多了,之前也有用到,但是毕竟不熟悉,于是查了一些资料,做了一些总结.看代码是最直观的,比什么长篇大论都要好.不过其中重要的理论,也要理解下. 首先是环境,程序运行需要几个包,这里用m ...
- JavaScript面向对象之我见
序言 在JavaScript的大世界里讨论面向对象,都要提到两点:1.JavaScript是一门基于原型的面向对象语言 2.模拟类语言的面向对象方式.对于为什么要模拟类语言的面向对象,我个人认为:某些 ...
- PYTHON黑帽编程1.5 使用WIRESHARK练习网络协议分析
Python黑帽编程1.5 使用Wireshark练习网络协议分析 1.5.0.1 本系列教程说明 本系列教程,采用的大纲母本为<Understanding Network Hacks At ...