首页 > 代码库 > 元素随着滚动条滚动而滚动，但是到浏览器窗口顶部的距离是固定的功能代码

元素随着滚动条滚动而滚动，但是到浏览器窗口顶部的距离是固定的功能代码

2024-09-21 19:06:16   214人阅读

<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="http://www.mamicode.com/jquery-1.8.3.js"></script><!-- 注意修改引用路径 -->
    <style type="text/css"> 
          #Float {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>

元素随着滚动条滚动而滚动，但是到浏览器窗口顶部的距离是固定的功能代码


联系
我们