<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } .test{ margin:900px auto 500px; width:800px; height:600px; position: relative; background-color: #00ac61; } .target{ position: absolute; left:200px; width:400px; height:300px; opacity: 0; background-color: palevioletred; } </style> <script src="./js/jquery-1.11.3.min.js"></script> </head> <body> <div class="test"> <div class="target"> test test test </div> </div> <script> $(function(){ var targetHeight = $(".test").offset().top; $(window).scroll(function(){ slideIn($(".target"),150); }); function slideIn(obj,left){ var targetHeight = obj.offset().top; var scrollTop = $(this).scrollTop(); if(scrollTop>targetHeight-400){ obj.animate({left:left+‘px‘,opacity:1,filter:‘Alpha(opacity=90)‘},500); } }; }); </script> </body> </html>
原文：http://www.cnblogs.com/sapho/p/5526319.html