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的引用路径,然后在浏览器中打开这个页面,可以看到效果,应该就是你想要的
追问
追答
// 让浮动层距离窗口顶部,始终保持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);
}
});
给你一段我的代码自己参考这改
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询