Difference between revisions of "Template:Melbourne"

Line 2: Line 2:
  
 
<script>
 
<script>
−
function on() {
+
// When the user scrolls the page, execute myFunction
−
    document.getElementById("overlay").style.display = "block";
+
window.onscroll = function() {myFunction()};
−
}
+
  
−
function off() {
+
// Get the navbar
−
     document.getElementById("overlay").style.display = "none";
+
var navbar = document.getElementById("navbar");
 +
 
 +
// Get the offset position of the navbar
 +
var sticky = navbar.offsetTop;
 +
 
 +
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
 +
function myFunction() {
 +
  if (window.pageYOffset >= sticky) {
 +
     navbar.classList.add("sticky")
 +
  } else {
 +
    navbar.classList.remove("sticky");
 +
  }
 
}
 
}
 +
 
</script>
 
</script>
  
  
 
<style>
 
<style>
−
#overlay {
+
/* Style the navbar */
−
    position: fixed; /* Sit on top of the page content */
+
#navbar {
−
    display: none; /* Hidden by default */
+
  overflow: hidden;
−
    width: 100%; /* Full width (cover the whole page) */
+
  background-color: #333;
−
    height: 100%; /* Full height (cover the whole page) */
+
−
    top: 0;
+
−
    left: 0;
+
−
    right: 0;
+
−
    bottom: 0;
+
−
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
+
−
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
+
−
    cursor: pointer; /* Add a pointer on hover */
+
 
}
 
}
  
−
#text{
+
/* Navbar links */
−
    position: absolute;
+
#navbar a {
−
    top: 50%;
+
  float: left;
−
    left: 50%;
+
  display: block;
−
    font-size: 50px;
+
  color: #f2f2f2;
−
    color: white;
+
  text-align: center;
−
    transform: translate(-50%,-50%);
+
  padding: 14px;
−
    -ms-transform: translate(-50%,-50%);
+
  text-decoration: none;
 
}
 
}
  
 +
/* Page content */
 +
.content {
 +
  padding: 16px;
 +
}
 +
 +
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
 +
.sticky {
 +
  position: fixed;
 +
  top: 0;
 +
  width: 100%;
 +
}
 +
 +
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
 +
.sticky + .content {
 +
  padding-top: 60px;
 +
}
  
 
/*********ORI*********/
 
/*********ORI*********/
Line 626: Line 645:
  
 
<body>
 
<body>
−
 
+
<div id="navbar">
−
<div id="overlay">
+
   <a href="#home">Home</a>
−
   <div id="text">Overlay Text</div>
+
  <a href="#news">News</a>
 +
  <a href="#contact">Contact</a>
 
</div>
 
</div>
  

Revision as of 13:11, 6 October 2018