简单的一个Demo：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{height: 3000px;} .box{ width: 100px; height: 200px; background-color: rgb(58, 119, 106); position: absolute; z-index: 1; left: 100px; top: 0; -webkit-transition: all 0.3s; transition: all 0.3s; } .transition{ /* 缩放 */ -webkit-transform: scale3d(0,0,1); transform: scale3d(0,0,1); /* 定中心点 */ -webkit-transform-origin: center center; transform-origin: center center; } .fix{ position: fixed; } </style> </head> <body> <div class="box transition" id="box"></div> <script src="http://s.lamahui.com/jquery/jquery-2.1.1.min.js"></script> <script> $(function(){ $(window).scroll( function() { var t = $(window).scrollTop(); if(t > 400){ $('#box').removeClass('transition').addClass('fix'); }else{ $('#box').addClass('transition').addClass('fix'); } }); }); </script> </body> </html>