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