网页常用动态效果--悬浮广告

关键在于动态获取滚动坐标值

测试滚动事件

$(window).scroll(function(){

　　console.log($(window).scrolltop());

})

获取三个高度：窗口高度，盒子高度以及滚动坐标值，将广告盒子设置为绝对定位，当鼠标滚动时，其top值为滚动坐标值+窗口高度/2-盒子高度/2

css代码：

<style>
            div{
                width:50px;
                height:200px;
                position: absolute;
                top:0;
                background: lightgreen;
            }
            .right{
                right:0;
            }
        </style>

JQ代码：

    <script>
        $(function(){
            //获得三个高度
            
            var h2 = $(window).height();//窗口高度
            var h3 = $('div').height();//盒子高度
            //滚动事件
            $(window).scroll(function(){
                var h1 = $(window).scrollTop();//滚动值
                $('div').stop().animate({top:h1+h2/2-h3/2},200); //注意加动画前加stop()
            })
            $('span').on('click',function(){
                $(this).parent().css('display','none');
            })

        })                    
        </script>