jQuery 实现广告图fixed与scroll关联

发布时间:2020-07-21 17:23:13 作者:x涅槃
来源:网络 阅读:987

html代码部分:

<div class="arc_box">
    <div class="arc_left">左侧</div>
    <div class="arc_right">
    右侧
    <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; //计算触发ad停止fixed的临界点
	var hf=ad_gf.offset().top+ad_gf.outerHeight();			//计算触发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"});
	}
	});
})


推荐阅读:
  1. jquery 实现返回顶部功能
  2. jquery回到页面顶部代码案例

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

广告图 jquery scroll

上一篇:SQL关联查询 直接join 和子查询的区别

下一篇:kohana的orm学习 插入数据

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》