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

測試滾動事件

$(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代碼：

1 <script> 2 $(function(){ 3 //獲得三個高度 4 5 var h2 = $(window).height();//窗口高度 6 var h3 = $('div').height();//盒子高度 7 //滾動事件 8 $(window).scroll(function(){ 9 var h1 = $(window).scrollTop();//滾動值 10 $('div').stop().animate({top:h1+h2/2-h3/2},200); //注意加動畫前加stop() 11 }) 12 $('span').on('click',function(){ 13 $(this).parent().css('display','none'); 14 }) 15 16 }) 17 </script>

?

轉載于:https://www.cnblogs.com/shisanjun/p/4814154.html

總結

以上是生活随笔為你收集整理的网页常用动态效果--悬浮广告的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。