JavaScript兩側(cè)廣告跟隨,是指在網(wǎng)頁中設(shè)置兩側(cè)的廣告欄會隨著用戶的滾動而跟隨移動。這種技術(shù)常見于博客和新聞?wù)军c,讓網(wǎng)站看起來更加的美觀和現(xiàn)代化。
實現(xiàn)這種功能的核心點就是通過JavaScript來控制廣告欄的位置,并使其隨著用戶的滾動而移動。下面是一段使用jQuery實現(xiàn)兩側(cè)廣告跟隨效果的代碼:
$(function(){ var top= $('.sidebar').offset().top; //獲取自身頂部的距離 $(window).scroll(function () { var scrolls = $(this).scrollTop(); //獲取自身滾動條的距離 if (scrolls >= top) { $('.sidebar').stop().animate({ top: scrolls - top + 20 //設(shè)置移動后的距離 }, 300); } else { $('.sidebar').stop().animate({ top: 0 //如果沒有點擊到頂部,保持不動 }, 300); } }); });
上述代碼通過jQuery獲取廣告欄到頂部的距離,然后在滾動窗口的時候設(shè)置廣告欄的位置。如果滾動的距離大于或等于廣告欄到頂部的距離,則將廣告欄移動到特定位置。另外,由于動畫效果會影響網(wǎng)站的性能,因此還需要設(shè)置動畫時間。
除了使用jQuery外,實現(xiàn)兩側(cè)廣告欄跟隨效果還可以使用原生JavaScript來實現(xiàn)。下面是一個使用JavaScript實現(xiàn)的例子:
window.onload = function () { var sidebar = document.getElementById('sidebar'); var top = sidebar.offsetTop; //獲取自身頂部的距離 window.onscroll = function () { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //獲取滾動條頂部的距離 if (scrollTop >= top) { sidebar.style.position = 'fixed'; sidebar.style.top = '50px'; //根據(jù)實際需要設(shè)置移動后的距離 } else { sidebar.style.position = 'static'; } } }
和jQuery實現(xiàn)方法一樣,該方法也是通過獲取廣告欄的頂部距離,并在滾動窗口的時候設(shè)置廣告欄的位置。
總之,兩側(cè)廣告跟隨可以使網(wǎng)站看起來更加的美觀和現(xiàn)代化。無論是使用jQuery還是原生JavaScript,都可以實現(xiàn)這樣的效果。在實際操作中,應(yīng)根據(jù)網(wǎng)站的需要適當(dāng)調(diào)整廣告欄的位置和移動距離,以達(dá)到最佳的效果。