手机支付宝-支付宝 知托付！
http://qianbao.alipay.com/index.htm
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title></title> <style> * {margin: 0;padding: 0;} .head {height: 500px;} .box {height: 500px;} .box:nth-child(even) {background: gray;} .menu {width: 100%;height: 110px;background: olive;} .anim-fixed {position: fixed;top: 0;left: 0;} </style> </head> <body> <div class="head">head</div> <div class="menu">menu</div> <div class="box box1">box1</div> <div class="box box2">box2</div> <div class="box box3">box3</div> <script src="jquery-1.6.4.js"></script> <script> var $window = $(window) var windowWidth = $window.width() var windowHeight = $window.height() var headElem = $('.head') function resetTopHeight() { var topHeight = $window.height() - 110 if (topHeight > 500) { headElem.css({ 'height': topHeight + 'px' }) } } resetTopHeight() $window.resize(function() { windowWidth = $window.width() windowHeight = $window.height() resetTopHeight() }) setTimeout(function() { $window.scrollTop(0) }, 0) headElem.addClass('anim-head') function scrollAnim() { if ($window.scrollTop() > 140) { $('.box1').addClass('anim-box1') } if ($window.scrollTop() > 640) { $('.box2').addClass('anim-box2') } if ($window.scrollTop() > windowHeight) { $('.menu').addClass('anim-fixed') } else { $('.menu').removeClass('anim-fixed') } } scrollAnim() $window.scroll(function() { scrollAnim() }) </script> </body> </html>