bootstrap_learning/0280_navbar_scrollspy.html at master · akicho8/bootstrap_learning · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!-- スクロールに合わせてトップバーのactiveを切り替える -->
<!-- $("body").scrollSpy("refresh") で更新 -->
<!-- body以外に入れる方法はないのか -->
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link href="assets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
    <script src="assets/jquery.js" type="text/javascript"></script>
    <script src="assets/coffee-script.js" type="text/javascript"></script>
    <script src="assets/bootstrap.js" type="text/javascript"></script>
    <style type="text/css">
      section {
      padding-top: 50px;
      }
    </style>
  </head>
  <body data-spy="scroll" data-target=".mynav" data-offset="0">
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand" href="#">サイト名</a>
          <div class="mynav">
            <ul class="nav">
              <li><a href="#home">ホーム</a></li>
              <li><a href="#about">店舗について</a></li>
              <li><a href="#contact">お問い合わせ</a></li>
              <li><a href="#etc">その他</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <section id="home">
        <div class="alert alert-info">
          <h2>ホーム</h2>
          <div style="height: 64px"></div>
        </div>
      </section>
      <section id="about">
        <div class="alert alert-success">
          <h2>店舗について</h2>
          <div style="height: 64px"></div>
        </div>
      </section>
      <section id="contact">
        <div class="alert alert-error">
          <h2>お問い合わせ</h2>
          <div style="height: 64px"></div>
        </div>
      </section>
      <section id="etc">
        <div class="alert alert-warning">
          <h2>その他</h2>
          <div style="height: 1024px"></div>
        </div>
      </section>
    </div>
  </body>
</html>