Difference between revisions of "Team:Dalhousie/test4"

Line 56: Line 56:
 
   
 
   
 
<body>
 
<body>
 +
 +
<!--------------------------------------------------------------navbar------------------------------------------------------------------------------>
 +
<style>
 +
html, body {
 +
  height: 4000px;
 +
}
 +
 +
.navbar-fixed {
 +
  top: 0;
 +
  z-index: 100;
 +
  position: fixed;
 +
  width: 100%;
 +
}
 +
 +
#body_div {
 +
  top: 0;
 +
  position: relative;
 +
  height: 200px;
 +
  background-color: green;
 +
}
 +
 +
#banner {
 +
  width: 100%;
 +
  height: 273px;
 +
  background-color: gray;
 +
  overflow: hidden;
 +
}
 +
 +
#nav_bar {
 +
  border: 0;
 +
  background-color: #202020;
 +
  border-radius: 0px;
 +
  margin-bottom: 0;
 +
  height: 30px;
 +
}
 +
//the below css are for the links, not needed for sticky nav
 +
.nav_links {
 +
  margin: 0;
 +
}
 +
 +
.nav_links li {
 +
  display: inline-block;
 +
  margin-top: 4px;
 +
}
 +
 +
.nav_links li a {
 +
  padding: 0 15.5px;
 +
  color: #3498db;
 +
  text-decoration: none;
 +
}
 +
</style>
 +
<script>
 +
$(document).ready(function() {
 +
  //change the integers below to match the height of your upper dive, which I called
 +
  //banner.  Just add a 1 to the last number.  console.log($(window).scrollTop())
 +
  //to figure out what the scroll position is when exactly you want to fix the nav
 +
  //bar or div or whatever.  I stuck in the console.log for you.  Just remove when
 +
  //you know the position.
 +
  $(window).scroll(function () {
 +
 +
    console.log($(window).scrollTop());
 +
 +
    if ($(window).scrollTop() > 550) {
 +
      $('#nav_bar').addClass('navbar-fixed-top');
 +
    }
 +
 +
    if ($(window).scrollTop() < 551) {
 +
      $('#nav_bar').removeClass('navbar-fixed-top');
 +
    }
 +
  });
 +
});
 +
</script>
 +
 +
<div id="banner">
 +
  <h2>put what you want here</h2>
 +
  <p>just adjust javascript size to match this window</p>
 +
</div>
 +
 +
  <nav id='nav_bar'>
 +
    <ul class='nav_links'>
 +
      <li><a href="url">Sign In</a></li>
 +
      <li><a href="url">Blog</a></li>
 +
      <li><a href="url">About</a></li>
 +
    </ul>
 +
  </nav>
 +
 +
<div id='body_div'>
 +
  <p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here</p>
 +
</div>
 +
 +
  
  

Revision as of 15:07, 10 September 2017

and more stuff to continue scrolling here

Welcome to Dalhousie's 2017 iGEM wiki

Sponsor area