色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

JavaScript兩側(cè)廣告跟隨

趙永秀1年前6瀏覽0評論

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á)到最佳的效果。