Difference between revisions of "Template:RUM-UPRM/Example"
Paulamanan (Talk | contribs) |
Paulamanan (Talk | contribs) |
||
| Line 74: | Line 74: | ||
</nav> | </nav> | ||
<div class="col-sm-9 col-8"> | <div class="col-sm-9 col-8"> | ||
| − | <div id="section1"> | + | <div id="section1" class="insert color"> |
<h1>Section 1</h1> | <h1>Section 1</h1> | ||
<p>Try to scroll this section and look at the navigation list while scrolling!</p> | <p>Try to scroll this section and look at the navigation list while scrolling!</p> | ||
| Line 97: | Line 97: | ||
</div> | </div> | ||
</div> | </div> | ||
| + | |||
| + | |||
| + | |||
| + | |||
<script> | <script> | ||
window.onscroll = function() {myFunction()}; | window.onscroll = function() {myFunction()}; | ||
Revision as of 04:37, 26 October 2020
Scrollspy & Affix Example
Fixed vertical sidenav on scroll
Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".
The left menu sticks the page after you have scrolled a specified amount of pixels, and the links in the menu are automatically updated based on scroll position.
Section 1
Try to scroll this section and look at the navigation list while scrolling!
Section 2
Try to scroll this section and look at the navigation list while scrolling!
Section 3
Try to scroll this section and look at the navigation list while scrolling!
Section 4-1
Try to scroll this section and look at the navigation list while scrolling!
Section 4-2
Try to scroll this section and look at the navigation list while scrolling!