实现页面滑动到一定位置后弹出图片（兼容IE9/10/11,chrome,firefox,safari）

如题。希望这一次能够实现如下的右侧导航的效果：

http://www.tmall.com/go/act/315/anquanhuijia.php?spm=3.1000473.295292.d13.ipRRpg&ad_id=&am_id=&cm_id=140107924754f1af939f&pm_id#f6

让我来分析一下这个导航栏的效果是怎么实现的吧。

1.我们要有一张图片，用一个盒子来包住他。Map那块先不管他吧。

<!--右边导航栏-->
<div class="right-nav" id="right-nav">
    <img usemap="#test" id="pic" class="pic" src="../res/right-nav.png" />
    <map id="test" name="test">
      <area shape="rect" coords="5,299,121,336" href="#f1" />
      <area shape="rect" coords="6,336,120,362" href="#" />
      <area shape="rect" coords="7,361,120,384" href="#" />
      <area shape="rect" coords="5,383,120,412" href="#" />
      <area shape="rect" coords="7,413,122,440" href="#" />
      <area shape="circle" coords="61,472,31"   href="#" />
      <area shape="circle" coords="60,252,42" href="#f0" />
    </map>
</div>

2.添加了这张图片之后，我们要先让他给我们定位到右侧要的位置上去：这里使用jquery的一个函数来实现这种效果，所以你的网页先要引入一个jquery的库啦。这里就不引入演示了。将下面这段js代码放到script的标签里去。其中的top和right就是我们使用fixed定位的位置。可以根据你的需要来调整位置。

	<!--左侧导航栏实现由小变大的效果-->
	$(window).scroll(function(){
		  var h_num=$(window).scrollTop();
		  if(h_num>200){                  //这里的200是指当页面滑动到200px的时候，触发下面的函数。
			$('.pic').addClass('pichover'); 
			var temp = document.getElementById("right-nav");
			temp.style.position = "fixed";
			temp.style.top = "30px";  //可以根据你的需要来调整fixed的位置
			temp.style.right = "-3px";
		   }		       
			else{                     //当往回滑动时，删除该元素
			   $('.pic').removeClass('pichover');
		   }
		   
	});

实现这个功能的关键在下面的CSS。

/*左侧导航栏渐变大的css*/
.pic{
	display:block; 
	width:123px; 
	margin:60px 0 0; 
	padding:10px 10px 15px; 
	-webkit-transform:rotate(0deg) scale(0.0001); /*初始的时候，我们将其大小，也即scale设置得非常小以至不可见*/
	-moz-transform:rotate(0deg) scale(0.0001); 
	transform:rotate(0deg) scale(0.0001);
	transition:all 0.3s ease-in; /*这句话就是关键，让整个变大的过程缓缓进行*/
	border:none;
}
.pichover{
	 -webkit-transform:rotate(0deg) scale(1.0); /*当变换class的时候，通过这个transform的属性，让他变大*/
	 -moz-transform:rotate(0deg) scale(1.0); 
	 transform:rotate(0deg) scale(1.0);
}
/*左侧导航栏渐变大的css结束*/

目前这个效果只能够兼容IE9/10/11,chrome,safari,firefox,在IE8以下的浏览器中是失效的。淘宝天猫上的应该也是没有实现这个兼容性的。

然后，大家可以配合锚点，来实现导航的功能。