jQuery当滚动条滚动时 一个元素到浏览器顶部的距离 随滚动条滚动时，到顶部的距离为本身的top+滚动条滚动
的距离，就是固定div的位置不随滚动条滚动改变，不用fixed，就是一滚动top就等于滚动距离加上top。如此保证div到浏览器顶部的距离不变。...
的距离，就是固定div 的位置 不随滚动条滚动改变，不用fixed，就是一滚动top就等于滚动距离加上top。如此保证div到浏览器顶部的距离不变。
展开
2个回答
展开全部
<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的引用路径，然后在浏览器中打开这个页面，可以看到效果，应该就是你想要的
<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
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
#floatTop {//div名
background-color: #F0F0F0;
height: 48px;
width: 1366px;
position:fixed;
top: 0px;
display: none;
}
$(window).scroll(function () {
if ($(window).scrollTop() >=158) {
$("#floatTop").show(800);
}else{
$("#floatTop").hide(800);
}
}）;
给你一段我的代码自己参考这改
background-color: #F0F0F0;
height: 48px;
width: 1366px;
position:fixed;
top: 0px;
display: none;
}
$(window).scroll(function () {
if ($(window).scrollTop() >=158) {
$("#floatTop").show(800);
}else{
$("#floatTop").hide(800);
}
}）;
给你一段我的代码自己参考这改
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
