Как создать навигационную панель в стиле yahoo?

Question

Привет, Я ищу, чтобы создать навигационную панель, похожую на yahoos, однако мне не удалось найти пример. Некоторые из функций, которые я ищу, - это липкая панель навигации, которая выглядит так, как будто она выскакивает из своего места, когда пользователь прокручивается.

CSS

* { margin: 0; padding: 0; } 
html { overflow-y: scroll; } 
body { 
    font: 62.5% Arial, Helvetica, sans-serif; 
    background: #FFFFFF; 
} 

ul { list-style: none inside; } 
p { font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; } 
a img { border: none; } 

.floatleft { float: left; } 
.floatright { float: right; } 
.clear { clear: both; } 

a { 
    text-decoration: none; 
    outline: none; 
    color: #335588; 
    } 
    a:hover { 
     text-decoration: underline; 
    } 


    #top-bar { 
     background: #330000; 
     min-height: 60px; 
     padding: 0 10px; 
     font-size: 1.3em; 
     font-weight: bold; 
    } 

    #right-side { 
     float: right; 
     padding-top: 15px; 
     } 
    #right-side img { 
     border: 1px solid white; 
     vertical-align: middle; 
     } 
    #right-side a { 
     color: white; 
     border-left: 1px solid white; 
     height: 10px; 
     padding-left: 10px; 
     } 
    #right-side a.first { 
     border: none; 
     padding: 0; 
     } 

    #left-side { 
     float: left; 
     padding-top: 15px; 
     padding-left: 20px; 
     color: white; 
     font-size: 20px; 
     } 


    #sub-menu { 
     background: white; 
     min-height: 20px; 
     padding: 5px 10px 0 10px; 
     } 
    #sub-menu ul { 
     display: block; 
     color: #000000; 
     } 
    #sub-menu ul li { 
     height: 18px; 
     padding: 5px 10px 0 5px; 
     position: relative; 
     float: left; 
     margin-right: 10px; 
     color: #000000; 
     } 
    #sub-menu ul li:hover { 
     background: red; 
     height: 10px; 
     } 
    #sub-menu ul li a { 
     display: block; 
     float: left; 
     height: 23px; 
     position: relative; 
     top: -5px; 
     right: -5px; 
     padding-right: 3px; 
     color: #000000; 
     font-weight: bold; 
     font-size: 1.1em; 
     text-decoration: none; 
     } 

    #sub-menu ul li a span { 
     position: relative; 
     top: 6px; 
     } 
    #sub-menu ul li ul { 
     display: none; 
     position: absolute; 
     top: 29px; 
     left: 0px; 
     width: 150px; 
     border: 1px solid #ccc; 
     background: white; 
     padding: 10px 0 0 0; 
     } 
    #sub-menu ul li ul li { 
     float: none; 
     padding: 0; margin: 0; 
     height: 100%; 
     } 
    #sub-menu ul li ul li:hover { 
     background: none; 
     } 
    #sub-menu ul li ul li a { 
     display: block; 
     float: none; 
     margin-left: -5px; 
     padding: 5px 0 0 10px; 
     width: 140px; 
     } 
    #sub-menu ul li ul li a:hover { 
     background: #000000; 
     } 

HTML

<div id="top-bar"> 
    <img src="images/logo.png" alt="TEST" class="floatleft" /> 
     <div id="left-side"> 
      TEST 
     </div> 

     <div id="right-side"> 
      <a href="#">Logout</a>   
     </div> 
    </div> 

    <div id="sub-menu"> 
     <ul> 
         <li></li> 
         <li></li> 
         <li></li> 
     </ul> 
    </div> 

здесь обновленный jsfiddle, я получил линию, чтобы показать, но она по-прежнему обыкновение быть липким jsfiddle.net/cc48t/1549

Answer 1

Это, вероятно, не чисто CSS. С JQuery, вы можете поставить что-то вроде этого:

$(window).scroll(function() { 
    $(this).scrollTop() > 0 ? $('body').css('background', '#f0f') : $('body').css('background', '#0f0'); 
}).scroll(); 

Fiddle