То же самое, но с анимацией - .fadeIn() .fadeOut() - плавное изменение прозрачности + минимальный набор стилей
Код
<style type="text/css">
#header_bar{
display:none;
position:fixed;
width:100%;
min-width:1000px;
height:50px;
z-index:900;
}
#header_bar.opened{
display:block;
}
</style>
Код
<div id="header_bar">
<div>привет. Я классная верхняя панель.</div>
</div>
Код
<script type="text/javascript">
$(document).ready(function(){
var panel=($(window).scrollTop()>100)?$('#header_bar').show():$('#header_bar').hide();
$(window).scroll(function(){
if($(this).scrollTop() > 100 && !panel.hasClass('opened')){
panel.addClass('opened').fadeIn(300);
}else if($(this).scrollTop() < 100 && panel.hasClass('opened')){
panel.fadeOut(500,function(){panel.removeClass('opened')});
}});
});
</script>
☑ http://likbezz.ru/_example/_rest/_2013/p1/header_bar_v5.html
Код
<style type="text/css">
#header_bar{
position:relative;
height:50px;
z-index:900;
}
#header_bar.opened{
top: 0px;
position:fixed;
left:50px;
right:50px;
}
</style>
Код
<div id="header_bar">
<div class="panel">привет. Я классная верхняя панель.</div>
</div>
Код
<script type="text/javascript">
$(document).ready(function(){
var pos=$('#header_bar').offset().top-3,panel=($(window).scrollTop()>pos)?$('#header_bar').addClass('opened'):$('#header_bar');
$(window).scroll(function(){
if($(this).scrollTop() > pos && !panel.hasClass('opened')){
panel.addClass('opened');
}else if($(this).scrollTop() <= pos && panel.hasClass('opened')){
panel.removeClass('opened');
}});
});
</script>
☑ http://likbezz.ru/_example/_rest/_2013/p1/header_bar_v6.html