随滚动条滚动，始终处于屏幕的中间类似qq的浮动窗口 （能看到运动的过程） 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            height:1900px;
        }
        .cc{
            position:absolute;
            width:80px;
            height:120px;/*高度值可设置，也可通过内容自动填充*/
            background:green;
            right:0;
            top:50%;
        }
    </style>
    <script src="jquery-1.11.3.min.js"></script>
    <script>
        $(function(){
            function roll(){
                var $win=$(window).height(),$scroll=$(document).scrollTop(),$cc=$(".cc"),$height=$cc.height();
                $cc.animate({"top":$win/2+$scroll-$height/2},100)
            }
            roll();
            $(window).on("scroll",function(){
                roll();
            })
        })
    </script>
</head>
<body>
<div class="cc"></div>
</body>

</html>

 

posted @ 2016-11-25 14:52  dongxiaolei  阅读(392)  评论(0)    收藏  举报