<!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>流动侦测</title> <meta name="renderer" content="webkit"> <meta http-equiv="Cache-Control" content="no-siteapp"/> <link rel="icon" type="image/png" href="assets/i/favicon.png"> <meta name="mobile-web-app-capable" content="yes"> <link rel="icon" sizes="192x192" href="assets/i/[email protected]"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="Amaze UI"/> <link rel="apple-touch-icon-precomposed" href="assets/i/[email protected]"> <meta name="msapplication-TileImage" content="assets/i/[email protected]"> <meta name="msapplication-TileColor" content="#0e90d2"> <link rel="stylesheet" href="assets/css/amazeui.min.css"> </head> <body style="margin: 10px;"> <div style="height: 2000px;"></div> <div class="am-panel am-panel-primary" id="my-scrollspy"> <div class="am-panel-hd">ScrollSpy via JS </div> <div class="am-panel-bd"> 生命是一团欲望，欲望不满足便痛苦，满足便无聊。人生就在痛苦和无聊之间摇摆。——叔本华 </div> </div> <div style="height: 500px;"></div> <!--[if (gte IE 9)|!(IE)]><!--> <script src="assets/js/jquery.min.js"></script> <!--<![endif]--> <!--[if lte IE 8 ]> <script src="assets/ie8/jquery.min.js"></script> <script src="assets/ie8/modernizr.js"></script> <script src="assets/js/amazeui.ie8polyfill.min.js"></script> <![endif]--> <script src="assets/js/amazeui.min.js"></script> <script> $(function() { $('#my-scrollspy').scrollspy({ animation: 'slide-left', delay: 500 }) }); </script> <script> $(function() { $('#my-scrollspy').on('inview.scrollspy.amui', function() { console.log('进入视口'); $('.am-panel-bd').append('阅谁问君诵，水落清香浮。');//追加内容 }).on('outview.scrollspy.amui', function() { console.log('离开视口'); }); }); </script> </body> </html>
效果图：
<!doctype html> <html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>流动侦测</title> <meta name="renderer" content="webkit"> <meta http-equiv="Cache-Control" content="no-siteapp"/> <link rel="icon" type="image/png" href="assets/i/favicon.png"> <meta name="mobile-web-app-capable" content="yes"> <link rel="icon" sizes="192x192" href="assets/i/[email protected]"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="Amaze UI"/> <link rel="apple-touch-icon-precomposed" href="assets/i/[email protected]"> <meta name="msapplication-TileImage" content="assets/i/[email protected]"> <meta name="msapplication-TileColor" content="#0e90d2"> <link rel="stylesheet" href="assets/css/amazeui.min.css"> </head> <body style="margin: 10px;"> <div id="doc-scrollspy-wrapper" data-am-observe> <p>在下面插入一些元素试试：</p> </div> <p><button class="am-btn am-btn-primary" id="doc-scrollspy-insert">插入</button></p> <!--[if (gte IE 9)|!(IE)]><!--> <script src="assets/js/jquery.min.js"></script> <!--<![endif]--> <!--[if lte IE 8 ]> <script src="assets/ie8/jquery.min.js"></script> <script src="assets/ie8/modernizr.js"></script> <script src="assets/js/amazeui.ie8polyfill.min.js"></script> <![endif]--> <script src="assets/js/amazeui.min.js"></script> <script> $(function() { var i = 1; var $wrapper = $('#doc-scrollspy-wrapper'); var appendPanel = function(index) { var panel = '<div class="am-panel am-panel-primary" ' + 'data-am-scrollspy="{animation: \'scale-up\'}">' + '<div class="am-panel-bd">我是第' + index + '个插入的元素。</div></div>'; $wrapper.append(panel); }; $('#doc-scrollspy-insert').on('click', function() { appendPanel(i); i++; }); }); </script> </body> </html>
效果图：