Line 123: | Line 123: | ||
<div class="container" id="projectdescript" style="padding-bottom:50px; padding-top:50px; padding-right:100px; padding-left:150px; width:100%; height:1700px; background-color: black;"> | <div class="container" id="projectdescript" style="padding-bottom:50px; padding-top:50px; padding-right:100px; padding-left:150px; width:100%; height:1700px; background-color: black;"> | ||
− | <!-------------------------------------------infographic-----------------------------> | + | |
+ | |||
+ | <!-----------------------------------------------------------NAV-------------------------------------------------> | ||
+ | <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> | ||
+ | |||
+ | |||
+ | |||
+ | <!---------------------------------------------------------------------------------infographic-------------------------------------------------------------------> | ||
<p style="text-align:center; color:white;"> | <p style="text-align:center; color:white;"> | ||
<img src= "https://static.igem.org/mediawiki/2017/8/8b/Infograph2_1.jpg" align="center" height="85%" width="85%"></p> | <img src= "https://static.igem.org/mediawiki/2017/8/8b/Infograph2_1.jpg" align="center" height="85%" width="85%"></p> |
Revision as of 11:34, 12 September 2017
Welcome to Dalhousie's 2017 iGEM wiki
and more stuff to continue scrolling here
Sponsor area