"
Template:Team:DukeNB/CSS
From 2014.igem.org
(Difference between revisions)
(Replaced content with "<html xmlns="http://www.w3.org/1999/xhtml"> <!--THIS STYLE SHEET WILL FORMAT THE CALENDAR ON THE NOTEBOOK PAGE --> <head> <meta http-equiv="Content-Type" content="text/html...") |
|||
| Line 19: | Line 19: | ||
} | } | ||
| - | + | #demo_top_wrapper { margin:0 0 20px 0; } | |
| + | #demo_top { height:100px; padding:20px 0 0 0; } | ||
| + | #my_logo { font:70px Georgia, serif; } | ||
| + | |||
| + | /* our menu styles */ | ||
| + | #sticky_nav_wrap { width:100%; height:50px; } | ||
| + | #sticky_cal { width:100%; height:50px; background:url(trans-black-60.png); -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999; } | ||
| + | #sticky_navigation ul { list-style:none; margin:0; padding:5px; } | ||
| + | #sticky_navigation ul li { margin:0; padding:0; display:inline; } | ||
| + | #sticky_navigation ul li a { display:block; float:left; margin:0 0 0 5px; padding:0 20px; height:40px; line-height:40px; font-size:14px; font-family:Arial, serif; font-weight:bold; color:#ddd; background:#333; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; } | ||
| + | #sticky_navigation ul li a:hover, #sticky_navigation ul li a.selected { color:#fff; background:#111; } | ||
| + | </style> | ||
| + | <script> | ||
| + | $(function() { | ||
| + | |||
| + | // grab the initial top offset of the navigation | ||
| + | var sticky_cal_offset_top = $('#sticky_cal').offset().top; | ||
| + | |||
| + | // our function that decides whether the navigation bar should have "fixed" css position or not. | ||
| + | var sticky_navigation = function(){ | ||
| + | var scroll_top = $(window).scrollTop(); // our current vertical position from the top | ||
| + | |||
| + | // if we've scrolled more than the navigation, change its position to fixed to stick to top, | ||
| + | // otherwise change it back to relative | ||
| + | if (scroll_top > sticky_cal_offset_top) { | ||
| + | $('#sticky_cal').css({ 'position': 'fixed', 'top':0, 'left':0 }); | ||
| + | } else { | ||
| + | $('#sticky_cal').css({ 'position': 'relative' }); | ||
| + | } | ||
| + | }; | ||
| + | |||
| + | // run our function on load | ||
| + | sticky_navigation(); | ||
| + | |||
| + | // and run it again every time you scroll | ||
| + | $(window).scroll(function() { | ||
| + | sticky_cal(); | ||
| + | }); | ||
| + | |||
| + | }); | ||
| + | </script> | ||
Revision as of 15:39, 28 July 2014
