|
|
| Line 20: |
Line 20: |
| | | | |
| | #floatingbar { | | #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; | | line-height: 50px; |
| | text-align: center; | | text-align: center; |
| | margin: 0 auto; | | margin: 0 auto; |
| | padding: 0; | | padding: 0; |
| - | }
| + | position: fixed; |
| - | | + | top:0; |
| - | .default {
| + | left: 0; |
| - | 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"> | + | <div id="menu"> |
| | <ul> | | <ul> |
| | <li><a href="#">Home</a></li> | | <li><a href="#">Home</a></li> |
"
