"
Template:Amplino
From 2012e.igem.org
(Difference between revisions)
(Created page with "<html> <!-- Reset CSS - START <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/base/base-min.css"> Reset CSS - END /--> <!-- Internet Explorer ...") |
|||
| Line 18: | Line 18: | ||
/* Wiki Hacks - START */ | /* Wiki Hacks - START */ | ||
/* Team: Amplino */ | /* Team: Amplino */ | ||
| + | |||
| + | #floatingbar { | ||
| + | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #426d9c), color-stop(40%, #0f67a1), color-stop(100%, #1384d1)); | ||
| + | background: -moz-linear-gradient(top, #426d9c, #0f67a1, #1384d1); | ||
| + | |||
| + | border-radius: 5px; | ||
| + | -webkit-border-radius: 5px; | ||
| + | -moz-border-radius: 5px; | ||
| + | |||
| + | line-height: 50px; | ||
| + | text-align: center; | ||
| + | margin: 0 auto; | ||
| + | padding: 0; | ||
| + | } | ||
| + | |||
| + | .default { | ||
| + | width: 850px; | ||
| + | height: 50px; | ||
| + | |||
| + | box-shadow: 0 5px 20px #888; | ||
| + | -webkit-box-shadow: 0 5px 20px #888; | ||
| + | -moz-box-shadow: 0 5px 20px #888; | ||
| + | } | ||
| + | |||
| + | .fixed { | ||
| + | position: fixed; | ||
| + | top: -5px; | ||
| + | left: 0; | ||
| + | width: 100%; | ||
| + | |||
| + | box-shadow: 0 0 40px #222; | ||
| + | -webkit-box-shadow: 0 0 40px #222; | ||
| + | -moz-box-shadow: 0 0 40px #222; | ||
| + | } | ||
| + | |||
</style> | </style> | ||
| + | |||
| + | <script type="text/javascript"> | ||
| + | $(function(){ | ||
| + | |||
| + | var menu = $('#floatingbar'), | ||
| + | pos = menu.offset(); | ||
| + | |||
| + | $(window).scroll(function(){ | ||
| + | if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){ | ||
| + | menu.fadeOut('fast', function(){ | ||
| + | $(this).removeClass('default').addClass('fixed').fadeIn('fast'); | ||
| + | }); | ||
| + | } | ||
| + | else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){ | ||
| + | menu.fadeOut('fast', function(){ | ||
| + | $(this).removeClass('fixed').addClass('default').fadeIn('fast'); | ||
| + | }); | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | }); | ||
| + | </script> | ||
<div id="floatingbar"> | <div id="floatingbar"> | ||
| - | < | + | <div id="menu" class="default"> |
| + | <ul> | ||
| + | <li><a href="#">Home</a></li> | ||
| + | </ul> | ||
| + | </div> | ||
</div> | </div> | ||
</html> | </html> | ||
Revision as of 16:40, 26 April 2012
