jquery 实现广告图fixed与scroll关联

<div class="arc_box">
    <div class="arc_left">左侧</div>
    <div class="arc_right">
    右侧
    <a class="teachers_right_ad mt20">广告块</a>
    </div>
</div>
$(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"});
	}
	});
})
时间: 2024-08-05 15:38:48

jquery 实现广告图fixed与scroll关联的相关文章

原生JS和jQuery实现banner图滚动那些事

  前  言 阿q 作为一个准前端学员,banner图可是很重要的呢.本人,小白一只,给大家分享几个刚刚学习的基础banner图事件.~~~ 1. 小广告图滚动播放 1.1HTML代码 首先,创建基本结构 <div id="outside"> <div id="inside"> <div>1</div> <div>2</div> <div>3</div> <div&

Jquery漂浮广告、客服代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

JQuery仿最新淘宝网首页带箭头幻灯片,JQuery轮播图

JQuery代码 <script type="text/javascript"> $(function() { var $banner = $('.banner'); var $banner_ul = $('.banner-img'); var $btn = $('.banner-btn'); var $btn_a = $btn.find('a') var v_width = $banner.width(); var page = 1; var timer = null;

JQuery实现广告效果(滚动切换)

JQuery实现广告效果(滚动切换) Html+css 效果如上图 代码: Java代码   <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../jquery-2.1.4.min.js"></script> <

一款基于jQuery饼状图比例分布数据报表

今天给大家带来一款基于jQuery饼状图比例分布数据报表.这款报表插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div style="width: 600px; margin: 0 auto;"> <table id='myTable5'> <caption> 会员地区分布</caption> <th

8款耀眼的jQuery/HTML5焦点图滑块插件

1.HTML5/CSS3超酷焦点图特效 带前后翻页按钮 今天要分享的这款HTML5/CSS3焦点图插件切换效果比较简单,但是外观和功能却十分强大.该CSS3焦点图在切换图片时,图片以淡入淡出的方式缩小消失并显示下一张图片.焦点图插件还拥有一套非常大气的前后翻页按钮,是一款非常实用HTML5/CSS3焦点图应用. 在线演示 源码下载 2.HTML5/CSS3淡入淡出滑块焦点图 非常清新 我们已经分享过几款简单的CSS3/jQuery焦点图插件,今天要分享的这款焦点图切换时有淡如淡出的动画效果,是利

一个简单的基于jQuery的焦点图(幻灯片)代码

本代码实现的是横向循环滚动, <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery的焦点图(幻灯片)</title> <sc

iOS启动图和开屏广告图,类似网易

iOS启动图和开屏广告图,类似网易 启动图是在iOS开发过程中必不可少的一个部分,很多app在启动图之后会有一张自定义的开屏广告图,点击该广告图可以跳转到广告图对应的页面.今天呢,和大家分享一下如何添加这张广告图以及点击广告图的跳转.这个广告图是通过将UIImageView添加到UIWindow上实现的. 一.添加本地启动图 1.准备好本地图片 2.找到工程中的Images.xcassets文件,打开LaunchImage,将图片拖到对应的地方,如下图: 3.将LaunchScreen.stor

启动图后面 添加有倒计时的广告图

今天闲来无事,看到很多APP在启动图后面添加了广告图,今天就动手做了一下, 刚开始,打算用通知在APPdelegate中添加这个图片,但是尝试后发现,效果不是很理想:就在rootVC中进行操作了 直接上代码: -(void)gotoImage { self.window = [[UIApplication sharedApplication].delegate window]; self.mianImageview = [[UIImageView alloc]init]; _mianImagev