Difference between revisions of "Team:Dalhousie/test5"

Line 1: Line 1:
 
<html>
 
<html>
 
<body>
 
<body>
−
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
−
<script>
 
−
$(document).ready(function() {
 
−
 
 
−
  $(window).scroll(function () {
 
−
      //if you hard code, then use console
 
−
      //.log to determine when you want the
 
−
      //nav bar to stick. 
 
−
      console.log($(window).scrollTop())
 
−
    if ($(window).scrollTop() > 280) {
 
−
      $('#nav_bar').addClass('navbar-fixed');
 
−
    }
 
−
    if ($(window).scrollTop() < 281) {
 
−
      $('#nav_bar').removeClass('navbar-fixed');
 
−
    }
 
−
  });
 
−
});</script>
 
 
<div id="banner">
 
<div id="banner">
−
    <h2>put what you want here</h2>
+
  <h2>put what you want here</h2>
−
    <p>just adjust javascript size to match this window</p>
+
  <p>just adjust javascript size to match this window</p>
−
  </div>
+
</div>
  
 
   <nav id='nav_bar'>
 
   <nav id='nav_bar'>
 
     <ul class='nav_links'>
 
     <ul class='nav_links'>
−
      <li><a href="url">Nav Bar</a></li>
 
 
       <li><a href="url">Sign In</a></li>
 
       <li><a href="url">Sign In</a></li>
 
       <li><a href="url">Blog</a></li>
 
       <li><a href="url">Blog</a></li>
Line 31: Line 13:
 
     </ul>
 
     </ul>
 
   </nav>
 
   </nav>
 +
 
<div id='body_div'>
 
<div id='body_div'>
−
    <p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here</p>
+
  <p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here</p>
 
</div>
 
</div>
−
 
 
<style>
 
<style>
−
html, body{
+
html, body {
−
height: 4000px;
+
  height: 4000px;
 
}
 
}
  
 
.navbar-fixed {
 
.navbar-fixed {
−
    top: 0;
+
  top: 0;
−
    z-index: 100;
+
  z-index: 100;
 
   position: fixed;
 
   position: fixed;
−
    width: 100%;
+
  width: 100%;
 
}
 
}
  
 
#body_div {
 
#body_div {
−
top: 0;
+
  top: 0;
−
position: relative;
+
  position: relative;
−
    height: 200px;
+
  height: 200px;
−
    background-color: green;
+
  background-color: green;
 
}
 
}
  
 
#banner {
 
#banner {
−
width: 100%;
+
  width: 100%;
−
height: 273px;
+
  height: 273px;
−
    background-color: gray;
+
  background-color: gray;
−
overflow: hidden;
+
  overflow: hidden;
 
}
 
}
  
 
#nav_bar {
 
#nav_bar {
−
border: 0;
+
  border: 0;
−
background-color: #202020;
+
  background-color: #202020;
−
border-radius: 0px;
+
  border-radius: 0px;
−
margin-bottom: 0;
+
  margin-bottom: 0;
−
    height: 30px;
+
  height: 30px;
 
}
 
}
  
 +
//the below css are for the links, not needed for sticky nav
 
.nav_links {
 
.nav_links {
−
    margin: 0;
+
  margin: 0;
 
}
 
}
  
 
.nav_links li {
 
.nav_links li {
−
display: inline-block;
+
  display: inline-block;
−
    margin-top: 4px;
+
  margin-top: 4px;
 
}
 
}
 +
 
.nav_links li a {
 
.nav_links li a {
−
padding: 0 15.5px;
+
  padding: 0 15.5px;
−
color: #3498db;
+
  color: #3498db;
−
text-decoration: none;
+
  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>
 
</body>
 
</body>
 
</style>
 
</style>

Revision as of 17:35, 10 September 2017

and more stuff to continue scrolling here