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); |
这里是示例代码效果图:
下面是具体的示例代码,注意这里为了演示效果使用了固定悬浮框的效果,在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>