in English

ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤ ꯇꯧꯕꯥ꯫

ꯚꯤꯎꯄꯣꯔꯇꯇꯥ ꯍꯧꯖꯤꯛꯀꯤ ꯑꯣꯏꯅꯥ ꯀꯔꯝꯕꯥ ꯂꯤꯉ꯭ꯛ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯔꯤꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯇꯥꯛꯅꯕꯥ ꯁ꯭ꯛꯔꯣꯜ ꯄꯣꯖꯤꯁꯅꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯅꯠꯠꯔꯒꯥ ꯂꯤꯁ꯭ꯠ ꯒ꯭ꯔꯨꯞ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯑꯄꯗꯦꯠ ꯇꯧ꯫

ꯃꯁꯤ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ꯫

ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤꯅꯥ ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯃꯊꯧ ꯇꯥꯕꯥ ꯈꯔꯥ ꯂꯩ:

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯑꯁꯤ ꯁꯣꯔꯁꯇꯒꯤ ꯁꯦꯃꯒꯠꯂꯕꯗꯤ, ꯃꯁꯤꯗꯥutil.js .
ꯃꯁꯤ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯅꯦꯚ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯅꯠꯔꯒꯥ ꯂꯤꯁ꯭ꯠ ꯒ꯭ꯔꯨꯞ ꯑꯃꯗꯥ ꯁꯤꯖꯤꯟꯅꯒꯗꯕꯅꯤ .
ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤꯅꯥ position: relative;ꯅꯍꯥꯛꯅꯥ ꯁ꯭ꯄꯥꯏ ꯇꯧꯔꯤꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯃꯊꯧ ꯇꯥꯏ, ꯃꯍꯧꯁꯥꯅꯥ <body>.
, ꯅꯠꯇꯕꯥ ꯑꯇꯩ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯁ꯭ꯄꯥꯏ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ , ꯁꯦꯠ <body>ꯑꯃꯥ ꯁꯣꯌꯗꯅꯥ ꯂꯩꯍꯅꯒꯗꯕꯅꯤ ꯑꯃꯁꯨꯡ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯒꯗꯕꯅꯤ꯫heightoverflow-y: scroll;
ꯑꯦꯉ꯭ꯀꯔꯁꯤꯡ ( <a>) ꯃꯊꯧ ꯇꯥꯏ ꯑꯃꯁꯨꯡ ꯃꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯇꯥꯀꯄꯥ ꯇꯥꯏ id.

ꯃꯥꯌ ꯄꯥꯛꯅꯥ ꯏꯃꯞꯂꯤꯃꯦꯟꯇ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ, ꯅꯍꯥꯛꯀꯤ ꯅꯦꯚ ꯅꯠꯠꯔꯒꯥ ꯂꯤꯁ꯭ꯠ ꯒ꯭ꯔꯨꯞ ꯑꯗꯨꯅꯥ ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯑꯄꯗꯦꯠ ꯇꯧꯒꯅꯤ, .activeꯃꯈꯣꯌꯒꯤ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯄꯥꯟꯗꯃꯁꯤꯡꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯔꯒꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯑꯥꯏꯇꯦꯝ ꯑꯃꯗꯒꯤ ꯃꯊꯪꯒꯤ ꯑꯥꯏꯇꯦꯝ ꯑꯃꯗꯥ ꯂꯧꯊꯣꯛꯀꯅꯤ꯫

ꯅꯦꯚꯕꯥꯔꯒꯤ ꯃꯈꯥꯗꯥ ꯂꯩꯕꯥ ꯃꯐꯝ ꯑꯗꯨ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯇꯤꯕ ꯀ꯭ꯂꯥꯁ ꯍꯣꯡꯂꯀꯄꯥ ꯑꯗꯨ ꯌꯦꯡꯎ꯫ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯁꯨ ꯍꯥꯏꯂꯥꯏꯠ ꯇꯧꯒꯅꯤ꯫

@ꯑꯅꯣꯏꯕ

ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤ ꯈꯨꯗꯃꯒꯤꯗꯃꯛ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯀꯟꯇꯦꯟꯇ꯫ ꯑꯗꯣꯝꯅꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯑꯥꯔꯀꯤꯇꯦꯀꯆꯔ ꯐꯪꯂꯦ꯫ ꯄꯥꯁꯄꯣꯔꯠ ꯁ꯭ꯇꯥꯝꯄꯁꯤꯡ, ꯃꯍꯥꯛ ꯀꯣꯁ꯭ꯃꯣꯄꯣꯂꯤꯇꯥꯅꯅꯤ꯫ ꯐꯥꯏꯟ, ꯐ꯭ꯔꯦꯁ, ꯐꯤꯌꯔꯁ, ꯑꯩꯈꯣꯌꯅꯥ ꯂꯣꯀꯗꯥ ꯐꯪꯈꯤ꯫ ꯅꯨꯃꯤꯠ ꯑꯃꯗꯥ ꯑꯩꯅꯥ ꯅꯉꯕꯨ ꯃꯥꯡꯍꯅꯕꯥ ꯉꯃꯒꯅꯤ ꯍꯥꯌꯅꯥ ꯀꯩꯗꯧꯉꯩꯗꯥ ꯊꯧꯔꯥꯡ ꯇꯧꯈꯤꯗ꯭ꯔꯤ꯫ ꯃꯍꯥꯛꯅꯥ ꯅꯉꯒꯤ ꯊꯝꯃꯣꯌꯕꯨ ꯈꯥꯌꯗꯣꯀꯏ꯫ ꯅꯍꯥꯛꯀꯤ ꯀꯤꯁ ꯑꯁꯤ ꯀꯣꯁ꯭ꯃꯤꯛ ꯑꯣꯏ, ꯈꯣꯡꯊꯥꯡ ꯈꯨꯗꯤꯡꯃꯛ ꯃꯦꯖꯤꯀꯅꯤ꯫ ꯑꯩꯅꯥ ꯍꯥꯌꯔꯤꯕꯁꯤꯡ ꯑꯗꯨ, ꯑꯩꯅꯥ ꯍꯥꯌꯕꯗꯤ ꯃꯍꯥꯛ ꯑꯗꯨꯒꯨꯝꯅꯥ꯫ ꯅꯨꯡꯉꯥꯏꯕꯥ ꯐꯣꯡꯗꯣꯀꯆꯔꯤ ꯅꯨꯡꯁꯤꯖꯔꯕꯥ ꯏꯔꯩꯕꯥꯀꯆꯥꯁꯤꯡ ꯈꯣꯡꯆꯠ ꯑꯃꯥ ꯆꯠꯂꯁꯤ꯫ ꯖꯨꯂꯥꯏ ꯴ꯒꯤ ꯃꯇꯃꯒꯨꯝ ꯅꯨꯃꯤꯠ ꯑꯗꯨ ꯈꯛꯇꯥ ꯃꯁꯥꯒꯤ ꯑꯣꯏꯖꯕꯥ ꯊꯤꯕꯅꯤ! ꯑꯗꯨꯕꯨ ꯑꯗꯣꯝꯅꯥ ꯃꯥꯡꯍꯟ ꯇꯥꯀꯍꯅꯕꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯐꯩ꯫

@mdo ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫

ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤ ꯈꯨꯗꯃꯒꯤꯗꯃꯛ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯀꯟꯇꯦꯟꯇ꯫ ‘ꯃꯔꯃꯗꯤ ꯃꯍꯥꯛ ꯃ꯭ꯌꯨꯖꯝ ꯑꯃꯁꯨꯡ ꯑꯥꯔꯇꯤꯁ꯭ꯇꯅꯤ꯫ (ꯑꯩꯈꯣꯌꯅꯥ ꯃꯁꯤ ꯀꯔꯝꯅꯥ ꯇꯧꯏ) ꯑꯗꯨꯅꯥ ꯅꯈꯣꯌꯅꯥ ꯃꯦꯖꯤꯛ ꯁꯥꯟꯅꯕꯥ ꯄꯥꯝꯃꯤ꯫ ꯑꯗꯨꯅꯥ ꯑꯗꯣꯝꯅꯥ ꯃꯁꯤ ꯄꯨꯝꯅꯃꯛ ꯑꯩꯉꯣꯟꯗꯥ ꯄꯤꯗ꯭ꯔꯤꯉꯩꯗꯥ ꯁꯣꯏꯗꯅꯥ ꯁꯣꯏꯗꯅꯥ ꯇꯧꯕꯤꯌꯨ꯫ ꯑꯩꯅꯥ ꯆꯠꯂꯤ, ꯑꯩꯅꯥ ꯑꯦꯌꯔꯗꯥ ꯆꯠꯂꯤ (ꯉꯁꯤ ꯅꯨꯃꯤꯗꯥꯡꯋꯥꯏꯔꯝ)꯫ ꯋꯥꯔꯤ ꯁꯥꯅꯕꯥ ꯊꯥꯗꯣꯀꯎ, ꯄꯨꯝꯅꯃꯛ ꯇꯥꯈꯤ, ꯈꯣꯡꯆꯠ ꯆꯠꯄꯒꯤ ꯃꯇꯝ꯫

ꯑꯃ

Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

two

Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.

three

ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤ ꯈꯨꯗꯃꯒꯤꯗꯃꯛ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯀꯟꯇꯦꯟꯇ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯅꯥꯟꯊꯣꯀꯄꯥ ꯄꯥꯝꯂꯕꯗꯤ, ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯄꯨꯝꯅꯃꯛ ꯄꯥꯝꯂꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ ꯈꯉꯏ ꯃꯗꯨꯗꯤ ꯑꯩꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯀꯧꯒꯗꯕꯥ ꯅꯨꯄꯤꯃꯆꯥ ꯑꯗꯨꯅꯤ꯫ ꯑꯩꯅꯥ ꯇꯧꯒꯗꯕꯥ ꯅꯣꯡꯂꯩ ꯅꯨꯡꯁꯤꯠ ꯑꯗꯨꯒꯤ ꯃꯔꯛꯇꯥ ꯆꯠꯂꯨ꯫ ꯑꯗꯨꯅꯥ ꯑꯩꯍꯥꯛꯅꯥ ꯅꯈꯣꯌꯒꯤ ꯃꯄꯣꯛ ꯅꯨꯃꯤꯠꯀꯤ ꯁꯨꯇꯇꯥ ꯄꯨꯔꯛꯀꯅꯤ꯫ ꯂꯥꯄꯊꯣꯀꯈꯤꯕꯥ ꯑꯗꯨ꯫ ꯍꯧꯈꯤꯕꯥ ꯁꯨꯛꯔꯕꯥꯔꯤꯒꯤ ꯑꯌꯨꯛꯇꯥ, ꯏꯌꯦꯟ ꯑꯩꯅꯥ ꯈꯜꯂꯤ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯥꯏꯟ ꯊꯨꯒꯥꯏꯔꯦ, ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯊꯃꯒꯅꯤ ꯍꯥꯌꯅꯥ ꯍꯥꯌꯔꯤ꯫ ‘ꯃꯔꯃꯗꯤ ꯃꯍꯥꯛ ꯈꯔꯥ ꯌꯣꯀꯣꯀꯏ, ꯑꯃꯁꯨꯡ ꯃꯍꯥꯛ ꯈꯔꯥ ‘ꯑꯣꯍ ꯅꯣ’ꯅꯤ꯫ ꯑꯩꯅꯥ ꯄꯥꯝꯃꯤ ꯖꯣ ꯗ꯭ꯔꯣꯞꯄꯤꯟ’, ꯑꯥꯏ ꯄꯣꯄꯤꯟ’, ꯍꯦꯗ ꯇꯔꯅꯤꯡ’, ꯕꯣꯗꯤ ꯁꯣꯀꯤꯡ’꯫ ꯏꯌꯦꯟ, ꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯀ꯭ꯔꯦꯗꯤꯠ ꯀꯥꯔꯗꯁꯤꯡ ꯃꯦꯛꯁ ꯇꯧꯈꯤ ꯑꯃꯁꯨꯡ ꯕꯥꯔꯗꯒꯤ ꯂꯧꯊꯣꯀꯈꯤ꯫

ꯑꯃꯁꯨꯡ ꯑꯍꯦꯅꯕꯥ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯀꯟꯇꯦꯟꯇ ꯈꯔꯥ, ꯑꯐꯕꯥ ꯃꯥꯏꯄꯥꯀꯄꯒꯤꯗꯃꯛ꯫

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

ꯅꯦꯁ꯭ꯇꯦꯗ ꯅꯦꯚꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯈꯨꯗꯝ꯫

ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤꯅꯥ ꯅꯦꯁ꯭ꯇꯦꯗ .navꯑꯦꯁ. ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯦꯁ꯭ꯇꯦꯗ ꯑꯃꯥ ꯑꯣꯏꯔꯕꯗꯤ .navꯃꯁꯤꯒꯤ .activeꯃꯃꯥ - ꯃꯄꯥꯁꯤꯡꯁꯨ .active. ꯅꯦꯚꯕꯥꯔꯒꯤ ꯃꯅꯥꯛꯇꯥ ꯂꯩꯕꯥ ꯑꯦꯔꯤꯌꯥ ꯑꯗꯨ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯇꯤꯕ ꯀ꯭ꯂꯥꯁ ꯍꯣꯡꯂꯀꯄꯥ ꯑꯗꯨ ꯌꯦꯡꯎ꯫

ꯑꯥꯏꯇꯦꯝ ꯱

ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤ ꯈꯨꯗꯃꯒꯤꯗꯃꯛ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯀꯟꯇꯦꯟꯇ꯫ ꯃꯁꯤꯒꯤ ꯑꯃꯅꯥ ꯑꯥꯏꯇꯦꯝ ꯱ꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯩ, ꯅꯍꯥꯀꯄꯨ ꯃꯥꯏꯜ ꯋꯥꯡꯅꯥ ꯂꯧꯏ, ꯑꯁꯨꯛ ꯋꯥꯡꯅꯥ ꯂꯧꯏ, ‘ꯃꯔꯃꯗꯤ ꯃꯍꯥꯛꯅꯥ ꯑꯗꯨꯒꯨꯝꯕꯥ ꯏꯟꯇꯔꯅꯦꯁ꯭ꯅꯦꯜ ꯁ꯭ꯃꯥꯏꯜ ꯑꯗꯨ ꯐꯪꯂꯦ꯫ ꯑꯩꯒꯤ ꯐꯃꯨꯡꯗꯥ ꯑꯆꯝꯕꯥ ꯃꯤꯑꯣꯏ ꯑꯃꯥ ꯂꯩꯔꯤ, ꯑꯩꯒꯤ ꯃꯀꯣꯀꯊꯣꯡꯕꯗꯥ ꯄꯣꯀꯄꯥ ꯑꯃꯥ ꯂꯩꯔꯤ꯫ ꯑꯣꯍ, ꯅꯠꯇꯦ꯫ ꯑꯇꯣꯞꯄꯥ ꯄꯨꯟꯁꯤ ꯑꯃꯗꯥ ꯑꯩꯅꯥ ꯅꯉꯕꯨ ꯂꯩꯍꯅꯒꯅꯤ꯫ ‘ꯃꯔꯃꯗꯤ ꯑꯩ, ꯑꯩꯅꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯃꯠꯇꯥ ꯇꯧꯕꯥ ꯉꯃꯏ꯫ ꯑꯩꯒꯤ ꯀ꯭ꯔꯥꯎꯟ ꯕꯦꯇꯂꯒꯤꯗꯃꯛ ꯁꯨꯇꯤꯡ ꯇꯧꯕꯥ꯫ ꯃꯃꯥ-ꯃꯄꯥꯒꯤ ꯂꯤꯛꯌꯨꯏꯗ ꯍꯨꯔꯥꯟꯗꯨꯅꯥ ꯌꯨꯃꯊꯛꯇꯥ ꯂꯥꯟꯊꯣꯀꯄꯗꯥ ꯁꯤꯖꯤꯟꯅꯔꯝꯃꯤ꯫ ꯇꯣꯟ, ꯇꯦꯟ ꯐꯤꯠ ꯑꯃꯁꯨꯡ ꯔꯦꯗꯤ, ꯇꯔꯟ ꯏꯠ ꯑꯥꯞ ꯀꯧꯖ ꯏꯠ ꯒꯦꯇꯤꯡ’ ꯍꯦꯚꯤ꯫ ꯃꯍꯥꯛꯀꯤ ꯅꯨꯡꯁꯤꯕꯥ ꯑꯁꯤ ꯗ꯭ꯔꯒ ꯑꯃꯒꯨꯝꯕꯅꯤ꯫ ꯑꯩꯍꯥꯛꯅꯥ ꯈꯜꯂꯤ ꯃꯗꯨꯗꯤ ꯑꯩꯍꯥꯛꯀꯤ ꯆꯌꯦꯠꯅꯕꯥ ꯑꯃꯥ ꯂꯩ ꯍꯥꯌꯕꯥ ꯀꯥꯑꯣꯈꯤ꯫

ꯑꯥꯏꯇꯦꯝ ꯱-꯱ ꯂꯩ꯫

ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤ ꯈꯨꯗꯃꯒꯤꯗꯃꯛ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯀꯟꯇꯦꯟꯇ꯫ ꯃꯁꯤꯒꯤ ꯑꯃꯅꯥ ꯑꯥꯏꯇꯦꯝ ꯱-꯱ꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯩ꯫ ꯑꯗꯣꯝꯅꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯑꯥꯔꯀꯤꯇꯦꯀꯆꯔ ꯐꯪꯂꯦ꯫ ꯄꯥꯁꯄꯣꯔꯠ ꯁ꯭ꯇꯥꯝꯄꯁꯤꯡ, ꯃꯍꯥꯛ ꯀꯣꯁ꯭ꯃꯣꯄꯣꯂꯤꯇꯥꯅꯅꯤ꯫ ꯐꯥꯏꯟ, ꯐ꯭ꯔꯦꯁ, ꯐꯤꯌꯔꯁ, ꯑꯩꯈꯣꯌꯅꯥ ꯂꯣꯀꯗꯥ ꯐꯪꯈꯤ꯫ ꯅꯨꯃꯤꯠ ꯑꯃꯗꯥ ꯑꯩꯅꯥ ꯅꯉꯕꯨ ꯃꯥꯡꯍꯅꯕꯥ ꯉꯃꯒꯅꯤ ꯍꯥꯌꯅꯥ ꯀꯩꯗꯧꯉꯩꯗꯥ ꯊꯧꯔꯥꯡ ꯇꯧꯈꯤꯗ꯭ꯔꯤ꯫ ꯃꯍꯥꯛꯅꯥ ꯅꯉꯒꯤ ꯊꯝꯃꯣꯌꯕꯨ ꯈꯥꯌꯗꯣꯀꯏ꯫ ꯅꯍꯥꯛꯀꯤ ꯀꯤꯁ ꯑꯁꯤ ꯀꯣꯁ꯭ꯃꯤꯛ ꯑꯣꯏ, ꯈꯣꯡꯊꯥꯡ ꯈꯨꯗꯤꯡꯃꯛ ꯃꯦꯖꯤꯀꯅꯤ꯫ ꯑꯩꯅꯥ ꯍꯥꯌꯔꯤꯕꯁꯤꯡ ꯑꯗꯨ, ꯑꯩꯅꯥ ꯍꯥꯌꯕꯗꯤ ꯃꯍꯥꯛ ꯑꯗꯨꯒꯨꯝꯅꯥ꯫ ꯅꯨꯡꯉꯥꯏꯕꯥ ꯐꯣꯡꯗꯣꯀꯆꯔꯤ ꯅꯨꯡꯁꯤꯖꯔꯕꯥ ꯏꯔꯩꯕꯥꯀꯆꯥꯁꯤꯡ ꯈꯣꯡꯆꯠ ꯑꯃꯥ ꯆꯠꯂꯁꯤ꯫ ꯖꯨꯂꯥꯏ ꯴ꯒꯤ ꯃꯇꯃꯒꯨꯝ ꯅꯨꯃꯤꯠ ꯑꯗꯨ ꯈꯛꯇꯥ ꯃꯁꯥꯒꯤ ꯑꯣꯏꯖꯕꯥ ꯊꯤꯕꯅꯤ! ꯑꯗꯨꯕꯨ ꯑꯗꯣꯝꯅꯥ ꯃꯥꯡꯍꯟ ꯇꯥꯀꯍꯅꯕꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯐꯩ꯫

ꯑꯥꯏꯇꯦꯝ ꯱-꯲ ꯂꯩ꯫

Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

Item 2

Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception.

Item 3

Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal.

Item 3-1

Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me.

Item 3-2

ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤ ꯈꯨꯗꯃꯒꯤꯗꯃꯛ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯀꯟꯇꯦꯟꯇ꯫ ꯃꯁꯤꯒꯤ ꯑꯃꯅꯥ ꯑꯥꯏꯇꯦꯝ ꯳-꯲ꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯩ꯫ ꯅꯍꯥꯛ ꯑꯔꯤꯖꯤꯅꯦꯜ ꯑꯣꯏꯔꯦ, ꯃꯍꯨꯠ ꯁꯤꯅꯕꯥ ꯌꯥꯔꯣꯏ꯫ ꯅꯨꯃꯤꯠ ꯈꯨꯗꯤꯡꯒꯤ ꯃꯈꯣꯌꯅꯥ ꯁꯥꯟꯅꯔꯤ, ꯅꯉꯒꯤ ꯏꯁꯩ꯫ ꯀꯦꯂꯤꯐꯣꯔꯅꯤꯌꯥꯒꯤ ꯅꯨꯄꯤꯃꯆꯥꯁꯤꯡ ꯑꯩꯈꯣꯌꯅꯥ ꯌꯥꯗꯕꯥ ꯌꯥꯗꯦ꯫ ꯈꯣꯉꯎꯞ ꯌꯥꯑꯣꯗꯕꯥ ꯄꯥꯈꯪꯒꯨꯝ꯫ ꯍꯧꯖꯤꯛ ꯑꯀꯤꯕꯥ ꯂꯩꯇꯦ, ꯊꯥꯗꯣꯀꯎ ꯑꯃꯁꯨꯡ ꯁꯨꯞꯅꯇꯒꯤ ꯐ꯭ꯔꯤ ꯑꯣꯏꯌꯨ, ꯑꯩꯅꯥ ꯅꯉꯕꯨ ꯀꯟꯗꯤꯁꯟ ꯂꯩꯇꯅꯥ ꯅꯨꯡꯁꯤꯒꯅꯤ꯫ ꯋꯥꯂꯗꯥ ꯏꯕꯥ ꯑꯗꯨ ꯑꯩꯅꯥ ꯎꯕꯥ ꯐꯪꯂꯤ꯫ ꯑꯗꯣꯝꯅꯥ ꯃꯥꯂꯦꯝ ꯁꯤꯅꯕꯥ ꯊꯨꯡꯅꯥ ꯆꯠꯄꯥ ꯌꯥꯏ ꯑꯗꯨꯕꯨ ꯁꯅꯥꯒꯤ ꯇꯛꯃꯥꯟ ꯑꯁꯤꯒꯥ ꯅꯛꯅꯅꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯑꯃꯠꯇꯥ ꯂꯥꯀꯄꯥ ꯂꯩꯇꯦ꯫

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Item 2</a>
    <a class="nav-link" href="#item-3">Item 3</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Item 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Item 3-2</h5>
  <p>...</p>
</div>

ꯂꯤꯁ꯭ꯠ-ꯒ꯭ꯔꯨꯄꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯈꯨꯗꯝ꯫

ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤꯅꯥ .list-groupꯑꯦꯁ. ꯂꯤꯁ꯭ꯠ ꯒ꯭ꯔꯨꯞ ꯑꯗꯨꯒꯤ ꯃꯅꯥꯛꯇꯥ ꯂꯩꯕꯥ ꯑꯦꯔꯤꯌꯥ ꯑꯗꯨ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯇꯤꯕ ꯀ꯭ꯂꯥꯁ ꯍꯣꯡꯂꯀꯄꯥ ꯑꯗꯨ ꯌꯦꯡꯎ꯫

ꯑꯥꯏꯇꯦꯝ ꯱ ꯑꯥꯏꯇꯦꯝ ꯲ ꯑꯥꯏꯇꯦꯝ ꯳ ꯑꯥꯏꯇꯦꯝ ꯴

ꯑꯥꯏꯇꯦꯝ ꯱

ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤ ꯂꯤꯁ꯭ꯠ-ꯒ꯭ꯔꯨꯄꯀꯤ ꯈꯨꯗꯃꯒꯤꯗꯃꯛ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯀꯟꯇꯦꯟꯇ꯫ ꯃꯁꯤꯒꯤ ꯑꯃꯅꯥ ꯑꯥꯏꯇꯦꯝ ꯱ꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯩ, ꯃꯥꯉꯖꯧꯅꯅꯥ ꯍꯥꯌꯖꯕꯒꯤ ꯃꯊꯧ ꯇꯥꯗꯦ꯫ ꯍꯧꯖꯤꯛ ꯑꯀꯤꯕꯥ ꯂꯩꯇꯦ, ꯊꯥꯗꯣꯀꯎ ꯑꯃꯁꯨꯡ ꯁꯨꯞꯅꯇꯒꯤ ꯐ꯭ꯔꯤ ꯑꯣꯏꯌꯨ, ꯑꯩꯅꯥ ꯅꯉꯕꯨ ꯀꯟꯗꯤꯁꯟ ꯂꯩꯇꯅꯥ ꯅꯨꯡꯁꯤꯒꯅꯤ꯫ ꯍꯧꯈꯤꯕꯥ ꯁꯨꯛꯔꯕꯥꯔꯤꯒꯤ ꯑꯌꯨꯛꯇꯥ꯫ ꯂꯥꯡꯇꯛꯅꯔꯤꯕꯥ ꯀꯤꯟꯗꯥ ꯃꯤꯑꯣꯏ ꯑꯃꯥ ꯑꯣꯏꯔꯣꯏꯗꯕꯅꯤ ꯑꯩꯅꯥ ꯕꯦꯠ ꯇꯧꯒꯅꯤ ꯃꯗꯨꯗꯤ ꯃꯁꯤ ꯐꯖꯩ꯫ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯍꯥꯅꯕꯥ ꯑꯣꯏꯅꯥ ꯎꯅꯈꯤꯕꯥ ꯃꯇꯃꯗꯥ ꯍꯥꯏꯁ꯭ꯀꯨꯂꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯁꯣꯃꯔ꯫ ‘ꯃꯔꯃꯗꯤ ꯃꯍꯥꯛ ꯃ꯭ꯌꯨꯖꯝ ꯑꯃꯁꯨꯡ ꯑꯥꯔꯇꯤꯁ꯭ꯇꯅꯤ꯫ ꯀꯔꯤꯅꯣ? ꯉꯥꯏꯌꯨ. ꯑꯩꯍꯥꯛ ꯑꯦꯛꯁꯦꯞꯁꯟ ꯑꯣꯏꯔꯦ ꯍꯥꯌꯅꯥ ꯈꯜꯂꯀꯈꯤ꯫

ꯑꯥꯏꯇꯦꯝ ꯲

ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤ ꯂꯤꯁ꯭ꯠ-ꯒ꯭ꯔꯨꯄꯀꯤ ꯈꯨꯗꯃꯒꯤꯗꯃꯛ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯀꯟꯇꯦꯟꯇ꯫ ꯃꯁꯤꯒꯤ ꯑꯃꯅꯥ ꯑꯥꯏꯇꯦꯝ ꯲ꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯩ, ꯏꯌꯦꯟ, ꯃꯍꯥꯛꯅꯥ ꯃꯁꯥꯒꯤ ꯕꯤꯠꯇꯥ ꯅꯥꯟꯊꯣꯀꯏ꯫ ꯑꯣꯍ, ꯅꯠꯇꯦ꯫ ꯑꯗꯣꯝ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯆꯥꯎꯕꯥ ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ‘ꯀꯖ, ꯕꯦꯕꯤ, ꯅꯉꯅꯥ ꯐꯥꯌꯔꯋꯥꯔꯛ ꯑꯃꯅꯤ꯫ ꯊꯣꯡ ꯄꯨꯝꯅꯃꯛ ꯊꯤꯡꯖꯤꯅꯕꯒꯤ ꯃꯔꯝ ꯑꯃꯥ ꯑꯣꯏꯔꯝꯕꯥ ꯌꯥꯏ꯫ ꯅꯍꯥꯛꯀꯤ ꯊꯝꯃꯣꯌ ꯑꯗꯨ ꯍꯥꯡꯗꯣꯀꯎ ꯑꯃꯁꯨꯡ ꯃꯁꯤ ꯍꯧꯗꯣꯀꯎ꯫ ꯑꯗꯨꯅꯥ très ꯆꯤꯛ, ꯏꯌꯦꯟ, ꯃꯍꯥꯛ ꯀ꯭ꯂꯥꯁꯤꯛ ꯑꯃꯅꯤ꯫

ꯑꯥꯏꯇꯦꯝ ꯳

ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤ ꯂꯤꯁ꯭ꯠ-ꯒ꯭ꯔꯨꯄꯀꯤ ꯈꯨꯗꯃꯒꯤꯗꯃꯛ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯀꯟꯇꯦꯟꯇ꯫ ꯃꯁꯤꯒꯤ ꯑꯃꯅꯥ ꯑꯥꯏꯇꯦꯝ ꯳ꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯩ, ꯑꯩꯈꯣꯌꯅꯥ ꯍꯦꯟꯅꯥ ꯋꯥꯡꯅꯥ ꯆꯠꯂꯤ꯫ ꯀꯩꯗꯧꯉꯩꯗꯁꯨ ꯑꯃꯅꯥ ꯑꯃꯕꯨ ꯌꯥꯑꯣꯗꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯄꯦꯛꯇ ꯑꯃꯥ ꯁꯦꯃꯈꯤ꯫ ꯑꯩꯍꯥꯛ ꯑꯦꯌꯔꯗꯥ ꯆꯠꯂꯤ꯫ ꯀꯅꯥꯒꯨꯝꯕꯥ ꯑꯃꯅꯥ ꯍꯥꯌꯈꯤ ꯃꯗꯨꯗꯤ ꯅꯍꯥꯛꯀꯤ ꯇꯦꯇꯨ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯈ꯭ꯔꯦ꯫ ꯍꯧꯖꯤꯛ ꯑꯩꯍꯥꯛ ꯇꯝꯄꯥꯛ ꯑꯃꯒꯨꯝ ꯇꯨꯝꯂꯤ꯫ ꯇꯣꯟ, ꯇꯦꯟ ꯐꯤꯠ ꯑꯃꯁꯨꯡ ꯔꯦꯗꯤ, ꯇꯔꯟ ꯏꯠ ꯑꯥꯞ ꯀꯧꯖ ꯏꯠ ꯒꯦꯇꯤꯡ’ ꯍꯦꯚꯤ꯫ ꯃꯔꯃꯗꯤ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯅꯉꯅꯥ ꯑꯩꯒꯤ ꯑꯣꯏꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ, ꯅꯉꯅꯥ ꯑꯩꯒꯤ ꯑꯣꯏꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ꯫ ꯅꯍꯥꯛꯅꯥ ꯈꯖꯤꯛꯇꯪ ꯃꯉꯥꯜ ꯑꯗꯨ ꯃꯩ ꯊꯥꯗꯨꯅꯥ ꯃꯗꯨꯕꯨ ꯃꯉꯥꯜ ꯄꯤꯕꯥ ꯇꯥꯏ! ꯑꯗꯨꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯕꯣꯂꯋꯔꯗꯇꯥ ꯊꯦꯡꯅꯈꯤ꯫ ꯑꯗꯣꯝꯅꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯇꯃꯗꯥ ꯐꯥꯑꯣꯔꯤꯕ꯭ꯔꯥ, ꯑꯁꯨꯛ ꯌꯥꯝꯅꯥ ꯄꯦꯄꯔ ꯊꯤꯟ ꯑꯣꯏꯅꯥ ꯐꯥꯑꯣꯔꯤꯕ꯭ꯔꯥ꯫ ꯑꯩꯍꯥꯛꯅꯥ ꯄꯨꯝꯅꯃꯛ ꯎꯕꯥ ꯐꯪꯂꯤ, ꯍꯧꯖꯤꯛ ꯎꯕꯥ ꯐꯪꯂꯤ꯫

ꯑꯥꯏꯇꯦꯝ ꯴

ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤ ꯂꯤꯁ꯭ꯠ-ꯒ꯭ꯔꯨꯄꯀꯤ ꯈꯨꯗꯃꯒꯤꯗꯃꯛ ꯄ꯭ꯂꯦꯁꯍꯣꯜꯗꯔ ꯀꯟꯇꯦꯟꯇ꯫ ꯃꯁꯤꯒꯤ ꯑꯃꯅꯥ ꯑꯥꯏꯇꯦꯝ ꯴ꯒꯥ ꯃꯔꯤ ꯂꯩꯅꯩ, ꯑꯩꯈꯣꯌꯅꯥ ꯑꯍꯥꯅꯕꯥ ꯑꯣꯏꯅꯥ ꯎꯅꯈꯤꯕꯥ ꯃꯇꯃꯗꯥ ꯍꯥꯏꯁ꯭ꯀꯨꯂꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯁꯣꯃꯔ꯫ ꯍꯧꯖꯤꯛ ꯑꯀꯤꯕꯥ ꯂꯩꯇꯦ, ꯊꯥꯗꯣꯀꯎ ꯑꯃꯁꯨꯡ ꯁꯨꯞꯅꯇꯒꯤ ꯐ꯭ꯔꯤ ꯑꯣꯏꯌꯨ, ꯑꯩꯅꯥ ꯅꯉꯕꯨ ꯀꯟꯗꯤꯁꯟ ꯂꯩꯇꯅꯥ ꯅꯨꯡꯁꯤꯒꯅꯤ꯫ ꯅꯨꯃꯤꯠꯅꯥ ꯆꯨꯝꯂꯕꯥ ꯈꯣꯡꯎꯞ ꯑꯗꯨ ꯑꯁꯨꯛ ꯌꯥꯝꯅꯥ ꯅꯨꯡꯉꯥꯏꯅꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯄꯣꯄꯁꯤꯀꯜ ꯑꯗꯨ ꯁꯣꯀꯍꯜꯂꯒꯅꯤ꯫ ꯃꯁꯤꯒꯤ ꯅꯨꯡꯁꯤꯕꯥ ꯑꯁꯤꯅꯥ ꯅꯍꯥꯀꯄꯨ ꯂꯦꯚꯤꯇꯦꯠ ꯇꯧꯍꯅꯒꯅꯤ꯫

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
  <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
  <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  <h4 id="list-item-1">Item 1</h4>
  <p>...</p>
  <h4 id="list-item-2">Item 2</h4>
  <p>...</p>
  <h4 id="list-item-3">Item 3</h4>
  <p>...</p>
  <h4 id="list-item-4">Item 4</h4>
  <p>...</p>
</div>

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

ꯅꯍꯥꯛꯀꯤ ꯇꯣꯄꯕꯥꯔ ꯅꯦꯚꯤꯒꯦꯁꯟꯗꯥ ꯁ꯭ꯛꯔꯣꯂꯁꯄꯤ ꯕꯤꯍꯦꯕꯤꯌꯔ ꯐꯖꯅꯥ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ, data-spy="scroll"ꯅꯍꯥꯛꯅꯥ ꯁ꯭ꯄꯥꯏ ꯇꯧꯕꯥ ꯄꯥꯝꯂꯤꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ (ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯃꯍꯧꯁꯥꯅꯥ ꯃꯁꯤ ꯑꯣꯏꯒꯅꯤ <body>). ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯗꯨ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯀꯝꯄꯣꯅꯦꯟꯇ data-targetꯑꯃꯍꯦꯛꯇꯒꯤ ꯄꯦꯔꯦꯟꯇ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯤ ID ꯅꯠꯠꯔꯒꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫.nav

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

ꯅꯍꯥꯛꯀꯤ CSSꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ position: relative;, ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤꯗꯥ ꯀꯧꯕꯤꯌꯨ:

$('body').scrollspy({ target: '#navbar-example' })

ꯔꯤꯖꯣꯂꯕ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯑꯥꯏ.ꯗꯤ.ꯒꯤ ꯄꯥꯟꯗꯃꯁꯤꯡ ꯃꯊꯧ ꯇꯥꯏ꯫

ꯅꯕꯕꯥꯔ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯗꯥ ꯔꯤꯖꯣꯂꯕ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯑꯥꯏ.ꯗꯤ. ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, a <a href="#home">home</a>ꯑꯁꯤ <div id="home"></div>.

ꯅꯟ- `:visible`ꯇꯥꯔꯒꯦꯠ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯗꯨ ꯏꯒꯅꯣꯔ ꯇꯧꯈꯤ꯫

:visiblejQueryꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯑꯣꯏꯗꯕꯥ ꯇꯥꯔꯒꯦꯠ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯌꯦꯡꯁꯤꯅꯒꯅꯤ ꯑꯃꯁꯨꯡ ꯃꯈꯣꯌꯒꯤ ꯃꯔꯤ ꯂꯩꯅꯕꯥ ꯅꯦꯚ ꯑꯥꯏꯇꯦꯃꯁꯤꯡ ꯑꯁꯤ ꯀꯩꯗꯧꯅꯨꯡꯗꯥ ꯍꯥꯏꯂꯥꯏꯠ ꯇꯧꯔꯣꯏ꯫

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

`.scrollspy('refresh')`

DOM ꯗꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯂꯧꯊꯣꯀꯄꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤ ꯁꯤꯖꯤꯟꯅꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ, ꯅꯍꯥꯛꯅꯥ ꯔꯤꯐ꯭ꯔꯦꯁ ꯃꯦꯊꯗ ꯑꯗꯨ ꯑꯁꯨꯝꯅꯥ ꯀꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯏ:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

`.scrollspy('dispose')`

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤ ꯃꯥꯡꯍꯜꯂꯤ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯑꯣꯄꯁꯅꯒꯤ ꯃꯃꯤꯡ ꯑꯗꯨ data-, data-offset="".

ꯃꯤꯡ	ꯃꯈꯜ	ꯀꯥꯡꯂꯣꯟ ꯏꯟꯗꯕ	ꯋꯥꯔꯣꯜ
ꯑꯣꯐꯁꯦꯠ ꯇꯧꯕꯥ꯫	ꯃꯁꯤꯡ	꯱꯰	ꯁ꯭ꯛꯔꯣꯂꯒꯤ ꯄꯣꯖꯤꯁꯟ ꯂꯦꯄꯊꯣꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯃꯊꯛꯇꯒꯤ ꯑꯣꯐꯁꯦꯠ ꯇꯧꯅꯕꯥ ꯄꯤꯛꯁꯦꯂꯁꯤꯡ꯫
ꯊꯧꯑꯪꯡ	ꯄꯔꯦꯡ	ꯑꯣꯇꯣ꯫	ꯁ꯭ꯄꯥꯏ ꯇꯧꯔꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯀꯔꯝꯕꯥ ꯁꯦꯛꯁꯅꯗꯥ ꯂꯩꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯈꯪꯗꯣꯀꯏ..ꯅꯥ `auto`ꯁ꯭ꯛꯔꯣꯜ ꯀꯣꯑꯣꯔꯗꯤꯅꯦꯠꯁꯤꯡ ꯐꯪꯅꯕꯒꯤꯗꯃꯛ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯃꯦꯊꯗ ꯑꯗꯨ ꯈꯜꯂꯒꯅꯤ꯫ `offset`ꯁ꯭ꯛꯔꯣꯜ ꯀꯣꯑꯣꯔꯗꯤꯅꯦꯠꯁꯤꯡ ꯐꯪꯅꯕꯥ jQuery ꯑꯣꯐꯁꯦꯠ ꯃꯦꯊꯗ ꯁꯤꯖꯤꯟꯅꯒꯅꯤ꯫ `position`ꯁ꯭ꯛꯔꯣꯜ ꯀꯣꯑꯣꯔꯗꯤꯅꯦꯠꯁꯤꯡ ꯐꯪꯅꯕꯥ jQuery ꯄꯣꯖꯤꯁꯟ ꯃꯦꯊꯗ ꯁꯤꯖꯤꯟꯅꯒꯅꯤ꯫
ꯄꯥꯟꯗꯝ	ꯁ꯭ꯠꯔꯤꯡ \| jQuery ꯑꯣꯕꯖꯦꯛꯇ \| ꯗꯤ.ꯑꯣ.ꯑꯦꯝ.ꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ꯫		ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯥꯏ ꯄ꯭ꯂꯒꯏꯟ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯇꯥꯀꯏ꯫

ꯊꯧꯔꯃꯁꯤꯡ꯫

ꯏꯚꯦꯟꯇ ꯃꯈꯜ꯫	ꯋꯥꯔꯣꯜ
ꯑꯦꯛꯇꯤꯚꯦꯠ ꯇꯧꯕꯥ.bs.scrollspy	ꯊꯧꯗꯣꯛ ꯑꯁꯤꯅꯥ ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤꯅꯥ ꯑꯅꯧꯕꯥ ꯑꯥꯏꯇꯦꯝ ꯑꯃꯥ ꯑꯦꯛꯇꯤꯕ ꯑꯣꯏꯕꯥ ꯃꯇꯃꯗꯥ ꯁ꯭ꯛꯔꯣꯜ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})

ꯁ꯭ꯛꯔꯣꯂꯁ꯭ꯄꯤ ꯇꯧꯕꯥ꯫

ꯃꯁꯤ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ꯫

ꯅꯕꯕꯥꯔꯗꯥ ꯈꯨꯗꯝ꯫

@ꯑꯅꯣꯏꯕ

@mdo ꯍꯥꯌꯅꯥ ꯈꯉꯅꯕꯥ꯫

ꯑꯃ

two

three

ꯅꯦꯁ꯭ꯇꯦꯗ ꯅꯦꯚꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯈꯨꯗꯝ꯫

ꯑꯥꯏꯇꯦꯝ ꯱

ꯑꯥꯏꯇꯦꯝ ꯱-꯱ ꯂꯩ꯫

ꯑꯥꯏꯇꯦꯝ ꯱-꯲ ꯂꯩ꯫

Item 2

Item 3

Item 3-1

Item 3-2

ꯂꯤꯁ꯭ꯠ-ꯒ꯭ꯔꯨꯄꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯈꯨꯗꯝ꯫

ꯑꯥꯏꯇꯦꯝ ꯱

ꯑꯥꯏꯇꯦꯝ ꯲

ꯑꯥꯏꯇꯦꯝ ꯳

ꯑꯥꯏꯇꯦꯝ ꯴

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

ꯔꯤꯖꯣꯂꯕ ꯇꯧꯕꯥ ꯌꯥꯕꯥ ꯑꯥꯏ.ꯗꯤ.ꯒꯤ ꯄꯥꯟꯗꯃꯁꯤꯡ ꯃꯊꯧ ꯇꯥꯏ꯫

ꯅꯟ- :visibleꯇꯥꯔꯒꯦꯠ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯗꯨ ꯏꯒꯅꯣꯔ ꯇꯧꯈꯤ꯫

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

.scrollspy('refresh')

.scrollspy('dispose')

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯊꯧꯔꯃꯁꯤꯡ꯫

ꯅꯟ- `:visible`ꯇꯥꯔꯒꯦꯠ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯗꯨ ꯏꯒꯅꯣꯔ ꯇꯧꯈꯤ꯫

`.scrollspy('refresh')`

`.scrollspy('dispose')`