網頁常用動態效果--懸浮廣告

關鍵在于動態獲取滾動坐標值

測試滾動事件

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

?