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

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

测试滚动事件

$(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>