Difference between revisions of "Template:British Columbia/Navbar"

(Undo revision 337716 by Catherinepan (talk))
Line 9: Line 9:
 
   <script type="text/javascript" src="https://2018.igem.org/Template:British_Columbia/bootstrapJS?action=raw&ctype=text/javascript"></script>
 
   <script type="text/javascript" src="https://2018.igem.org/Template:British_Columbia/bootstrapJS?action=raw&ctype=text/javascript"></script>
  
−
<script type="text/javascript" src="https://2018.igem.org/Template:British_Columbia/Javascript?
 
−
action=raw&ctype=text/javascript"></script>
 
−
</html>
 
  
 
<style>
 
<style>
 
p {
 
p {
 
   margin-bottom:0;
 
   margin-bottom:0;
−
}
 
−
 
−
.sticky {
 
−
  position: fixed;
 
−
  top: 0;
 
−
  width: 100%;
 
−
}
 
−
 
−
.sticky + .content {
 
−
  padding-top: 60px;
 
−
}
 
−
 
−
// When the user scrolls the page, execute myFunction
 
−
window.onscroll = function() {myFunction()};
 
−
 
−
// Get the navbar
 
−
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");
 
−
  }
 
 
}
 
}
  

Revision as of 23:43, 15 October 2018