jQuery 實現(xiàn)廣告圖fixed與scroll關(guān)聯(lián)

發(fā)布時間：2020-07-21 17:23:13 來源：網(wǎng)絡(luò) 閱讀：980 作者：x涅槃欄目：web開發(fā)

html代碼部分：

<div class="arc_box">
    <div class="arc_left">左側(cè)</div>
    <div class="arc_right">
    右側(cè)
    <a class="teachers_right_ad mt20">廣告塊</a>
    </div>
</div>

jQuery代碼部分

$(function(){
	var ad = $(".teachers_right_ad"); //聲明對象
	var ad_f = $(".arc_right");			//對象父元素
	var ad_gf = $(".arc_box");			//對象父元素的父元素
	var offset = ad.offset();
	var box_h = ad.outerHeight(true);
	var h=ad_gf.offset().top+ad_gf.outerHeight()-box_h; //計算觸發(fā)ad停止fixed的臨界點
	var hf=ad_gf.offset().top+ad_gf.outerHeight();			//計算觸發(fā)ad停止absolute的臨界點
	var hh=ad_gf.height()-ad.outerHeight(true);				//計算adabsolute的top值
	ad_f.css({"position":"relative"});									//給定ad的父元素position relative
	$(window).scroll(function(){
	if($(window).scrollTop()>=offset.top&&$(window).scrollTop()<h){
		ad.css({"position":"fixed","top":"0px"});
	}
	else if($(window).scrollTop()>=h &&$(window).scrollTop()<hf){

		ad.css({"position":"absolute","top":hh+"px"});
	}
	 else {
		ad.css({"position":"static"});
	}
	});
})

向AI問一下細(xì)節(jié)

jQuery 實現(xiàn)廣告圖fixed與scroll關(guān)聯(lián)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽