Headroom - 通过 JavaScript 调用 - MDUI 框架示例,Material Design 示例

HTML

CSS

JavaScript

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Headroom - 通过 JavaScript 调用</title>
  <link rel="stylesheet" href="../assets/mdui-v0.4.3/css/mdui.min.css"/>
  <style>
    body {
      padding-top: 120px;
    }
    #banner {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 60px;
      background: #607D8B;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

CSS

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var inst = new mdui.Headroom('#banner');
// method
document.getElementById('pin').addEventListener('click', function () {
  inst.pin();
});
document.getElementById('unpin').addEventListener('click', function () {
  inst.unpin();
});
document.getElementById('enable').addEventListener('click', function () {
  inst.enable();
});
document.getElementById('disable').addEventListener('click', function () {
  inst.disable();
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX