Difference between revisions of "Team:Dalhousie/test4"

Line 59: Line 59:
 
<!--------------------------------------------------------------navbar------------------------------------------------------------------------------>
 
<!--------------------------------------------------------------navbar------------------------------------------------------------------------------>
 
<style>
 
<style>
−
html, body {
+
body {
−
  height: 4000px;
+
  background-color: #333; 
 +
  color: #999;
 +
  font: 12px/1.4em Arial,sans-serif;
 
}
 
}
−
 
+
#wrap {
−
.navbar-fixed {
+
  margin: 10px auto;      
−
  top: 0;
+
  background: #666;
−
  z-index: 100;
+
  padding: 10px;
−
  position: fixed;
+
  width: 700px;
−
  width: 100%;
+
 
}
 
}
−
 
+
#header {
−
#body_div {
+
  background-color: #666;
−
  top: 0;
+
  color: #FFF;
−
  position: relative;
+
−
  height: 200px;
+
−
  background-color: green;
+
 
}
 
}
−
 
+
#logo {
−
#banner {
+
  font-size: 30px;
−
  width: 100%;
+
  line-height: 40px;  
−
  height: 273px;
+
  padding: 5px;
−
  background-color: gray;
+
−
  overflow: hidden;
+
 
}
 
}
−
 
+
#navWrap {
−
#nav_bar {
+
  height: 30px;
−
  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 {
−
.nav_links {
+
  padding: 5px;
−
  margin: 0;
+
  background: #999;  
 
}
 
}
−
 
+
#nav ul {
−
.nav_links li {
+
  margin: 0;
−
  display: inline-block;
+
  padding: 0;  
−
  margin-top: 4px;
+
 
}
 
}
−
 
+
#nav li {
−
.nav_links li a {
+
  float: left;
−
  padding: 0 15.5px;
+
  padding: 3px 8px;
−
  color: #3498db;
+
  background-color: #FFF;
−
  text-decoration: none;
+
  margin: 0 10px 0 0;
 +
  color: #F00;
 +
  list-style-type: none;
 +
}
 +
#nav li a {
 +
  color: #F00;
 +
  text-decoration: none;  
 
}
 
}
 +
#nav li a:hover {
 +
  text-decoration: underline; 
 +
}
 +
br.clearLeft {
 +
  clear: left;       
 +
}​
 
</style>
 
</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) {
+
<script>
−
      $('#nav_bar').addClass('navbar-fixed-top');
+
$(function() {
−
     }
+
    // Stick the #nav to the top of the window
−
 
+
    var nav = $('#nav');
−
     if ($(window).scrollTop() < 551) {
+
    var navHomeY = nav.offset().top;
−
      $('#nav_bar').removeClass('navbar-fixed-top');
+
     var isFixed = false;
−
    }
+
     var $w = $(window);
−
  });
+
    $w.scroll(function() {
 +
        var scrollTop = $w.scrollTop();
 +
        var shouldBeFixed = scrollTop > navHomeY;
 +
        if (shouldBeFixed && !isFixed) {
 +
            nav.css({
 +
                position: 'fixed',
 +
                top: 0,
 +
                left: nav.offset().left,
 +
                width: nav.width()
 +
            });
 +
            isFixed = true;
 +
        }
 +
        else if (!shouldBeFixed && isFixed)
 +
        {
 +
            nav.css({
 +
                position: 'static'
 +
            });
 +
            isFixed = false;
 +
        }
 +
    });
 
});
 
});
 +
​
 
</script>
 
</script>
  
−
<div id="banner">
+
<div id="header">
−
  <h2>put what you want here</h2>
+
        <div id="logo">Start Slowly Scrolling Down<br /> This Page!</div>
−
  <p>just adjust javascript size to match this window</p>
+
        <div id="navWrap">
−
</div>
+
            <div id="nav">
−
 
+
                <ul>
−
  <nav id='nav_bar'>
+
                    <li><a href="#" class="smoothScroll">Demo Link 1</a></li>
−
    <ul class='nav_links'>
+
                    <li><a href="#" class="smoothScroll">Demo Link 2</a></li>
−
      <li><a href="url">Sign In</a></li>
+
                    <li><a href="#" class="smoothScroll">Demo Link 3</a></li>
−
      <li><a href="url">Blog</a></li>
+
                    <li><a href="#" class="smoothScroll">Demo Link 4</a></li>
−
      <li><a href="url">About</a></li>
+
                </ul>  
−
    </ul>
+
                <br class="clearLeft" />
−
  </nav>
+
            </div>
−
 
+
        </div>
−
<div id='body_div'>
+
    </div>
−
  <p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here</p>
+
−
</div>
+
−
 
+
  
  

Revision as of 15:12, 10 September 2017

Welcome to Dalhousie's 2017 iGEM wiki

Sponsor area