jquery scroll事件

复制代码
复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    

    <script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">
    var timer = null;
    
    $(window).scroll(function(){
       var scrollTop = $(this).scrollTop();
       
       var divObj = $("#tv");
       var divHeight = divObj.height();
      
       var clientHeight = $(window).height();
       
       var targetTop = parseInt(scrollTop +(clientHeight-divHeight)/2);
       
       divObj.css("top",targetTop+"px");
       
       clearInterval(timer);
       
       timer = setInterval(function(){
        
        var top = divObj.offset().top;

        var speed = (targetTop - top)/6;
        
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
       
        var target = top + speed;
        
        if(Math.abs(target-targetTop)<6)
        {
            
            clearInterval(timer);
            
            divObj.css("top",targetTop+"px");
           
        }
        else
        {
            divObj.animate({ top: "+="+speed }, 1000);
        }

       },30);
       
       
    });
       
    </script>

</head>
<body style="height:2000px">

 <input type="text" id="txt" style="position:fixed;width:300px" />

 <div id="tv" style="position:absolute;width:200px;height:200px;right:0px;border:1px solid red"></div>  


</body>
</html>
复制代码

 

复制代码

 w3c scroll事件：

http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_scroll

posted @   大空白纸  阅读(647)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示