Claudiamanan (Talk | contribs) |
Claudiamanan (Talk | contribs) |
||
Line 1: | Line 1: | ||
+ | |||
{{RUM-UPRM}} | {{RUM-UPRM}} | ||
+ | {{RUM-UPRM/Nav}} | ||
+ | |||
<html lang="en"> | <html lang="en"> | ||
− | < | + | <head> |
− | < | + | <meta charset="utf-8"> |
− | + | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
− | < | + | <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> |
− | + | ||
− | + | ||
− | + | <style> | |
− | + | body { | |
− | + | position: relative; | |
− | + | ||
− | + | ||
− | + | } | |
− | + | ul.nav-pills { | |
− | + | top: 70px; | |
− | + | } | |
− | + | ||
− | + | ul.nav { | |
− | + | position: sticky; | |
− | < | + | |
− | + | } | |
− | + | div.col-8 div { | |
− | + | height: 500px; | |
− | + | } | |
− | + | .sticky { | |
− | + | position: relative; | |
− | < | + | top: 0; |
− | + | width: 100%; | |
− | + | } | |
− | + | #myScrollspy { | |
+ | position: sticky; | ||
+ | top: 70px; | ||
+ | |||
+ | } | ||
+ | |||
+ | </style> | ||
+ | </head> | ||
+ | <body data-spy="scroll" data-target="#myScrollspy" data-offset="1"> | ||
+ | |||
+ | <div class="container-fluid" style= "background-color:rgba(63, 201, 222, 1); height:100px; top: 200px"> | ||
+ | <center><h1>TITLE</h1></center> | ||
</div> | </div> | ||
− | <div> | + | |
+ | |||
+ | <div class="container-fluidtwo"> | ||
+ | <div class="row"> | ||
+ | <nav class="col-sm-3 col-4" id="myScrollspy"> | ||
+ | <ul class="nav nav-pills flex-sm-column"> | ||
+ | <li class="nav-item"> | ||
+ | <a class="nav-link active" href="#section1">Tema 1</a> | ||
+ | </li> | ||
+ | <li class="nav-item"> | ||
+ | <a class="nav-link" href="#section2">Tema 2</a> | ||
+ | </li> | ||
+ | <li class="nav-item"> | ||
+ | <a class="nav-link" href="#section3">Tema 3</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </nav> | ||
+ | |||
+ | |||
+ | <div class="col-sm-9 col-8; scroll"> <div align="justify"> | ||
+ | <div id="section1"> | ||
+ | <center><h1>Title</h1></center> | ||
+ | |||
+ | <p style="margin-left:7%; margin-right:7%"> Text Here </p> | ||
+ | </div> | ||
+ | |||
+ | <div id="section2"> | ||
+ | <center><h1>Tema 2</h1> </center> | ||
+ | <p style=" margin-left:7%; margin-right:7%"> Text Here</p> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div id="section3"> | ||
+ | <center> <h1>Tema 3</h1> </center> | ||
+ | <p style=" margin-left:7%; margin-right:7%">Text Here </p> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <script> | ||
+ | window.onscroll = function() {myFunction()}; | ||
+ | |||
+ | var myScrollspy = document.getElementById("myScrollspy"); | ||
+ | var sticky = myScrollspy.offsetTop+70px; | ||
+ | |||
+ | function myFunction() { | ||
+ | if (window.pageYOffset >= sticky) { | ||
+ | myScrollspy.classList.add("sticky") | ||
+ | } else { | ||
+ | myScrollspy.classList.remove("sticky"); | ||
+ | } | ||
+ | } | ||
+ | </script>
| ||
+ | </body> | ||
+ | </html> | ||
+ | |||
+ | {{RUM-UPRM/Footer}} | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
</div> <h3 class="mx-auto my-0 text-center">Phase I</h3> | </div> <h3 class="mx-auto my-0 text-center">Phase I</h3> |
Revision as of 01:08, 27 October 2020
TITLE
Title
Text Here
Tema 2
Text Here
Tema 3
Text Here