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

Line 2: Line 2:
 
{{RUM-UPRM}}
 
{{RUM-UPRM}}
 
{{RUM-UPRM/Nav}}
 
{{RUM-UPRM/Nav}}
 +
 
<html lang="en">
 
<html lang="en">
 
<head>
 
<head>
Line 9: Line 10:
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
 
   
 
   
 +
 +
<style>
 +
#myHeader {
 +
  background-color: lightblue;
 +
  color: black;
 +
  padding: 40px;
 +
  text-align: center;
 +
}
 +
</style>
 +
</head>
 +
 +
 +
<h1 id="myHeader">Project Description</h1>
 +
  
 
<style>
 
<style>
Line 40: Line 55:
 
</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;">
 
<div class="container-fluid" style="background-color:#2196F3;color:#fff;height:220px;">
Line 49: Line 62:
 
   <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>
 
   <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>
 
</div>
−
<br>
+
 
  
 
<div class="container-fluidtwo">
 
<div class="container-fluidtwo">

Revision as of 04:22, 26 October 2020



RUM-UPRM Wiki Source Code

Bootstrap Example

Project Description

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!