Difference between revisions of "Template:RUM-UPRM/Example"

Line 39: Line 39:
 
</head>
 
</head>
 
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
 
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
 +
 +
 +
 +
<div class="container-fluid" style="background-color:#2196F3;color:#fff;height:220px;">
 +
  <h1>Scrollspy & Affix Example</h1>
 +
  <h3>Fixed vertical sidenav on scroll</h3>
 +
  <p>Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".</p>
 +
  <p>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.</p>
 +
</div>
 +
<br>
  
 
<div class="container-fluid">
 
<div class="container-fluid">

Revision as of 04:05, 26 October 2020



RUM-UPRM Wiki Source Code

Bootstrap Example

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!