jQuery 实现广告图fixed与scroll关联
html代码部分:
<divclass="arc_box"><divclass="arc_left">左侧</div><divclass="arc_right">右侧<aclass="teachers_right_admt20">广告块</a></div></div>
jQuery代码部分
$(function(){varad=$(".teachers_right_ad");//声明对象varad_f=$(".arc_right");//对象父元素varad_gf=$(".arc_box");//对象父元素的父元素varoffset=ad.offset();varbox_h=ad.outerHeight(true);varh=ad_gf.offset().top+ad_gf.outerHeight()-box_h;//计算触发ad停止fixed的临界点varhf=ad_gf.offset().top+ad_gf.outerHeight();//计算触发ad停止absolute的临界点varhh=ad_gf.height()-ad.outerHeight(true);//计算adabsolute的top值ad_f.css({"position":"relative"});//给定ad的父元素positionrelative$(window).scroll(function(){if($(window).scrollTop()>=offset.top&&$(window).scrollTop()<h){ad.css({"position":"fixed","top":"0px"});}elseif($(window).scrollTop()>=h&&$(window).scrollTop()<hf){ad.css({"position":"absolute","top":hh+"px"});}else{ad.css({"position":"static"});}});})
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。