jQuery當滾動條滾動時 一個元素到瀏覽器頂部的距離 隨滾動條滾動時，到頂部的距離爲本身的top+滾動條滾動
的距離，就是固定div 的位置 不隨滾動條滾動改變，不用fixed，就是一滾動top就等於滾動距離加上top。如此保證div到瀏覽器頂部的距離不變。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jquery浮動層</title>
<script src="jquery-1.8.3.js"></script><!-- 注意修改引用路徑 -->
<style type="text/css">
#Float {background-color: #000;height: 200px;width: 100px;position: absolute;top: 80px;right: 20px;}
</style>
</head>
<script language="javascript">
$(document).ready(function(){
$(window).scroll(function (){
// 讓浮動層距離窗口頂部，始終保持80px
var offsetTop = $(window).scrollTop() + 80 +"px";
$("#Float").animate({top : offsetTop },{ duration:500 , queue:false });
});
});
</script>
<body>
<div style="height:2000px;"></div>
<div id="Float"></div>
</body>
</html>
這段代碼copy到一個空的html中，注意修改jQuery.1.8.3.js的引用路徑，然後在瀏覽器中打開這個頁面，可以看到效果，應該就是你想要的
追問
太感謝了 不過出現了這個現象
![]()
進到下面的div裏面了。能不能做成這個div到網頁頂部的距離始終等於它到網頁頂部的距離加上滾動條滾動的距離，比如滾動條沒動 top是100，滾動條滾動10，top=top+10；一直這樣的一個效果
回答
// 讓浮動層距離窗口頂部，始終保持80px
var offsetTop = $(window).scrollTop() + 80 +"px";
這句話應該就是你說的效果
$(window).scrollTop()就是滾動條滾動後的距離，然後offsetTop就是你寫的：top = top + 10
function bb(){
var obj = document.getElementById("aaa");
var topa = obj.offsetTop
var top=document.documentElement.scrollTop;
document.getElementById("aaa").innerHTML = topa-top;
}
window.οnlοad=function(){
document.documentElement.scrollTop = "200px";
}
使用js獲取的相關方法
//回到頁面頂部
$("#goTotop").click(function(){
$('body,html').animate({scrollTop:0},1500); //點擊按鈕讓其回到頁面頂部
});
$(window).scroll(function() {
var yheight1=window.pageYOffset; //滾動條距頂端的距離
var yheight=getScrollTop(); //滾動條距頂端的距離
var height =document.documentElement.clientHeight//瀏覽器可視化窗口的大小
var top=parseInt(yheight)+parseInt(height)-217;
var divobj=$(".kf");
divobj.attr('style','top:'+top+'px;');
})
/**
* 獲取滾動條距離頂端的距離
* @return {}支持IE6
*/
function getScrollTop() {
var scrollPos;
if (window.pageYOffset) {
scrollPos = window.pageYOffset; }
else if (document.compatMode && document.compatMode != 'BackCompat')
{ scrollPos = document.documentElement.scrollTop; }
else if (document.body) { scrollPos = document.body.scrollTop; }
return scrollPos;
}
getScrollTop（）使用這個方法在IE、谷歌和火狐上都能獲取。
做web開發經常會碰到需要獲取瀏覽器的滾動條與頂部和底部的距離，然後做相應的處理動作。下面作者就如何通過js來獲取瀏覽器滾動條距離瀏覽器頂部和底部的高度做一下分享，這個是同時兼容ie和firefox的。
首先我們需要知道的兩個定義是：
滾動條距離瀏覽器頂部的高度 = 窗口滾動條高度；
滾動條距離瀏覽器底部的高度 = 文檔（頁面）內容實際高度 - 滾動條距離瀏覽器頂部的高度 - 窗口可視範圍的高度；
好了，明白了這個定義，那我們就來具體看看如何獲取各種高度的方法，下面同時舉了一個示例。
獲取窗口可視範圍的高度
1 |
function getClientHeight(){ |
3 |
if(document.body.clientHeight&&document.documentElement.clientHeight){ |
4 |
var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; |
6 |
var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; |
獲取窗口滾動條高度
1 |
function getScrollTop(){ |
3 |
if(document.documentElement&&document.documentElement.scrollTop){ |
4 |
scrollTop=document.documentElement.scrollTop; |
5 |
}else if(document.body){ |
6 |
scrollTop=document.body.scrollTop; |
獲取文檔內容實際高度
1 |
function getScrollHeight(){ |
2 |
return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight); |
這裏是示例代碼效果圖：
![js獲取滾動條距離瀏覽器頂部,底部的高度,兼容ie和firefox]( "js獲取滾動條距離瀏覽器頂部,底部的高度,兼容ie和firefox")
下面是具體的示例代碼，注意這裏爲了演示效果使用了固定懸浮框的效果，在ie下面固定懸浮效果與上面的代碼有些衝突不起作用，這裏不深究了，讀者可以在firefox下面看效果，這個代碼本身是沒有問題的。
03 |
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" /> |
04 |
<title>js獲取滾動條距離瀏覽器頂部,底部的高度</title> |
06 |
<script type="text/javascript"> |
08 |
function
getClientHeight(){ |
10 |
if(document.body.clientHeight&&document.documentElement.clientHeight){ |
11 |
var
clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; |
13 |
var
clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; |
18 |
function
getScrollTop(){ |
20 |
if(document.documentElement&&document.documentElement.scrollTop){ |
21 |
scrollTop=document.documentElement.scrollTop; |
22 |
}else
if(document.body){ |
23 |
scrollTop=document.body.scrollTop; |
28 |
function
getScrollHeight(){ |
29 |
return
Math.max(document.body.scrollHeight,document.documentElement.scrollHeight); |
31 |
window.onscroll=function(){ |
32 |
var
height=getClientHeight(); |
33 |
var
theight=getScrollTop(); |
34 |
var
rheight=getScrollHeight(); |
35 |
var
bheight=rheight-theight-height; |
36 |
document.getElementById('show').innerHTML='此時瀏覽器可見區域高度爲：'+height+'<br />此時文檔內容實際高度爲：'+rheight+'<br />此時滾動條距離頂部的高度爲：'+theight+'<br />此時滾動條距離底部的高度爲：'+bheight; |
38 |
function
fixDiv(div_id,offsetTop){ |
39 |
var
offsetTop=arguments[1]?arguments[1]:0; |
40 |
var
Obj=$('#'+div_id); |
41 |
var
ObjTop=Obj.offset().top; |
42 |
var
isIE6=$.browser.msie && $.browser.version == '6.0'; |
44 |
$(window).scroll(function(){ |
45 |
if($(window).scrollTop()<=ObjTop){ |
47 |
'position':'relative', |
52 |
'position':'absolute', |
53 |
'top':$(window).scrollTop()+offsetTop+'px', |
59 |
$(window).scroll(function(){ |
60 |
if($(window).scrollTop()<=ObjTop){ |
62 |
'position':'relative', |
68 |
'top':0+offsetTop+'px', |
75 |
$(function(){fixDiv('show',5);}); |
79 |
<div style="height:500px;"></div> |
82 |
<div style="height:2000px;"></div> |
獲取元素（這裏定位元素A）距離頂部的高度，接着設定scroll滾動的事件，比如超過那個高度，把A的位置設定爲fixed，小於該高度，修改回relative。
方法一：
$(function() {
var elm = $('.nav');
var startPos = $(elm).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(elm).css('position',((p) > startPos) ? 'fixed' : 'static');
$(elm).css('top',((p) > startPos) ? '0px' : '');
});
});
方法二：
$(function(){
//獲取要定位元素距離瀏覽器頂部的距離
var navH = $(".nav").offset().top;
//滾動條事件
$(window).scroll(function(){
//獲取滾動條的滑動距離
var scroH = $(this).scrollTop();
//滾動條的滑動距離大於等於定位元素距離瀏覽器頂部的距離，就固定，反之就不固定
if(scroH>=navH){
$(".nav").css({"position":"fixed","top":0});
}else if(scroH＜navH){
$(".nav").css({"position":"static"});
}
})
})
例：
＜html>
＜head>
＜title>位置固定(＜/title>
＜script src="__COMS__/Jq/jquery-1.7.2.min.js">＜/script>
＜style type="text/css">
.fixed_div{
position:fixed;
left:200px;
bottom:20px;
width:400px;
}
＜/style>
＜script type="text/javascript">
$(function(){
//獲取要定位元素距離瀏覽器頂部的距離
var navH = $(".nav").offset().top;
//滾動條事件
$(window).scroll(function(){
//獲取滾動條的滑動距離
var scroH = $(this).scrollTop();
//滾動條的滑動距離大於等於定位元素距離瀏覽器頂部的距離，就固定，反之就不固定
if(scroH>=navH){
$(".nav").css({"position":"fixed","top":0});
}else if(scroH＜navH){
$(".nav").css({"position":"static"});
}
})
})
＜/script>
＜/head>
＜body>
＜div class="top">top＜/div>
＜p> ＜/p>
＜hr>
＜div class="nav">topnav＜/div>
＜div class="fixed_div" style="border:1px solid #200888;">content, I'm content＜/div>
＜div style="height:888px;">＜/div>
＜/body>
＜/html>
