|
|
Line 55: |
Line 55: |
| .dropdown:hover>.dropdown-menu { | | .dropdown:hover>.dropdown-menu { |
| display: block; | | display: block; |
− | }
| |
− |
| |
− | /* The progress container (grey background) */
| |
− | .progress-container {
| |
− | width: 100%;
| |
− | height: 8px;
| |
− | background: #ccc;
| |
− | }
| |
− |
| |
− | /* The progress bar (scroll indicator) */
| |
− | .progress-bar {
| |
− | height: 8px;
| |
− | background: #4caf50;
| |
− | width: 0%;
| |
| } | | } |
| | | |
Line 178: |
Line 164: |
| </div> | | </div> |
| </nav> | | </nav> |
− | <div class="progress-container">
| |
− | <div class="progress-bar" id="myBar"></div>
| |
− | </div>
| |
| | | |
| <script> | | <script> |
Line 200: |
Line 183: |
| </script> | | </script> |
| | | |
− | <script>
| |
− | // When the user scrolls the page, execute myFunction
| |
− | window.onscroll = function() {myFunction()};
| |
− |
| |
− | function myFunction() {
| |
− | var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
| |
− | var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
| |
− | var scrolled = (winScroll / height) * 100;
| |
− | document.getElementById("myBar").style.width = scrolled + "%";
| |
− | }
| |
− | </script>
| |
| | | |
| </html> | | </html> |