Difference between revisions of "Team:Dalhousie/test4"

Line 126: Line 126:
  
 
<!-----------------------------------------------------------NAV------------------------------------------------->
 
<!-----------------------------------------------------------NAV------------------------------------------------->
 +
 
<style>
 
<style>
−
html, body {
+
@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
−
  height: 4000px;
+
−
}
+
  
−
.navbar-fixed {
+
/* To mantain the navbar at the bottom*/
−
  top: 0;
+
header {
−
  z-index: 100;
+
−
  position: fixed;
+
 
   width: 100%;
 
   width: 100%;
 +
  min-height:calc(100vh - 52px);
 
}
 
}
  
−
#body_div {
 
−
  top: 0;
 
−
  position: relative;
 
−
  height: 200px;
 
−
  background-color: green;
 
−
}
 
  
−
#banner {
+
/* To mantain the navbar at the top once it is affixed */
−
  width: 100%;
+
.affix {
−
   height: 273px;
+
    top: 0;
−
  background-color: gray;
+
    width: 100%;
−
  overflow: hidden;
+
   }
−
}
+
  
−
#nav_bar {
+
/* Padding for a smoth affix */
−
  border: 0;
+
.affix + .container-fluid {
−
  background-color: #202020;
+
   padding-top: 72px;
−
  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>
 
</style>
 
<script>
 
<script>
−
$(document).ready(function() {
+
$(function(){
−
  //change the integers below to match the height of your upper dive, which I called
+
    $('.navbar').affix({
−
  //banner.  Just add a 1 to the last number.  console.log($(window).scrollTop())
+
      offset: {
−
  //to figure out what the scroll position is when exactly you want to fix the nav
+
        /* Affix the navbar after scroll below header */
−
  //bar or div or whatever.  I stuck in the console.log for you.  Just remove when
+
        top: $("header").outerHeight(true)}
−
  //you know the position.
+
    });
−
  $(window).scroll(function () {
+
});
 +
</script>
  
−
    console.log($(window).scrollTop());
+
<header class='container-fluid'>
 +
  <h1>Title</h1>
 +
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac neque et sem molestie scelerisque.<br/>In felis sem, pharetra ornare mi et, mattis rhoncus est.<br/>Fusce id nulla et enim molestie fermentum sed ullamcorper nibh. </p>
 +
</header>
  
−
     if ($(window).scrollTop() > 550) {
+
<nav class='navbar navbar-default'>
−
       $('#nav_bar').addClass('navbar-fixed-top');
+
  <div class='container'>
−
     }
+
     <div class='navbar-header'>
 +
      <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
 +
        <span class='sr-only'>Toggle Navigation</span>
 +
        <span class='icon-bar'></span>
 +
        <span class='icon-bar'></span>
 +
        <span class='icon-bar'></span>
 +
      </button>
 +
       <a href='#' class='navbar-brand'> Title</a>
 +
     </div>
  
−
     if ($(window).scrollTop() < 551) {
+
     <div class='collapse navbar-collapse'>
−
       $('#nav_bar').removeClass('navbar-fixed-top');
+
       <ul class='nav navbar-nav navbar-right'>
−
     }
+
        <li><a href=''>Link</a></li>
−
   });
+
        <li><a href=''>Link</a></li>
−
});
+
        <li><a href=''>Link</a></li>
−
</script>
+
        <li><a href=''>Link</a></li>
 +
      </ul>
 +
     </div>
 +
   </div>
 +
</nav>
  
−
<div id="banner">
+
<div class='container-fluid'>
−
   <h2>put what you want here</h2>
+
   <h1>Title</h1>
−
   <p>just adjust javascript size to match this window</p>
+
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac neque et sem molestie scelerisque.<br/>In felis sem, pharetra ornare mi et, mattis rhoncus est.<br/>Fusce id nulla et enim molestie fermentum sed ullamcorper nibh. </p>
 +
  <h1>Title</h1>
 +
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac neque et sem molestie scelerisque.<br/>In felis sem, pharetra ornare mi et, mattis rhoncus est.<br/>Fusce id nulla et enim molestie fermentum sed ullamcorper nibh. </p>
 +
  <h1>Title</h1>
 +
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac neque et sem molestie scelerisque.<br/>In felis sem, pharetra ornare mi et, mattis rhoncus est.<br/>Fusce id nulla et enim molestie fermentum sed ullamcorper nibh. </p>
 +
  <h1>Title</h1>
 +
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac neque et sem molestie scelerisque.<br/>In felis sem, pharetra ornare mi et, mattis rhoncus est.<br/>Fusce id nulla et enim molestie fermentum sed ullamcorper nibh. </p>
 
</div>
 
</div>
  
−
  <nav id='nav_bar'>
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
−
    <ul class='nav_links'>
+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
−
      <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>
+
  
  
 +
<!-----------------------------------------------------------NAVEND------------------------------------------------->
  
 
<!---------------------------------------------------------------------------------infographic------------------------------------------------------------------->
 
<!---------------------------------------------------------------------------------infographic------------------------------------------------------------------->

Revision as of 14:49, 12 September 2017

Welcome to Dalhousie's 2017 iGEM wiki

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac neque et sem molestie scelerisque.
In felis sem, pharetra ornare mi et, mattis rhoncus est.
Fusce id nulla et enim molestie fermentum sed ullamcorper nibh.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac neque et sem molestie scelerisque.
In felis sem, pharetra ornare mi et, mattis rhoncus est.
Fusce id nulla et enim molestie fermentum sed ullamcorper nibh.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac neque et sem molestie scelerisque.
In felis sem, pharetra ornare mi et, mattis rhoncus est.
Fusce id nulla et enim molestie fermentum sed ullamcorper nibh.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac neque et sem molestie scelerisque.
In felis sem, pharetra ornare mi et, mattis rhoncus est.
Fusce id nulla et enim molestie fermentum sed ullamcorper nibh.

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac neque et sem molestie scelerisque.
In felis sem, pharetra ornare mi et, mattis rhoncus est.
Fusce id nulla et enim molestie fermentum sed ullamcorper nibh.

Sponsor area