的距离,就是固定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的引用路径,然后在浏览器中打开这个页面,可以看到效果,应该就是你想要的
追问
回答
// 让浮动层距离窗口顶部,始终保持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(){ |
2 |
var clientHeight=0; |
3 |
if (document.body.clientHeight&&document.documentElement.clientHeight){ |
4 |
var clientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; |
5 |
} else { |
6 |
var clientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; |
7 |
} |
8 |
return clientHeight; |
9 |
} |
获取窗口滚动条高度
1 |
function getScrollTop(){ |
2 |
var scrollTop=0; |
3 |
if (document.documentElement&&document.documentElement.scrollTop){ |
4 |
scrollTop=document.documentElement.scrollTop; |
5 |
} else if (document.body){ |
6 |
scrollTop=document.body.scrollTop; |
7 |
} |
8 |
return scrollTop; |
9 |
} |
获取文档内容实际高度