<!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/app-icon72x72@2x.png">
<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/app-icon72x72@2x.png">
<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
<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>

效果图：

AmazeUI 流动侦测_ico


 

<!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/app-icon72x72@2x.png">
<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/app-icon72x72@2x.png">
<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
<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>

效果图：

AmazeUI 流动侦测_javascript_02