<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery固定位置下拉隐藏上拉显示悬浮导航菜单特效代码 </title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<style type="text/css">
body{background-color:white; padding-top:10px; font:100 14px 'Open Sans'}
#lipsum{width:690px; margin:30px auto; color:#34495e;text-align:justify}
.yapiskan{
background-color:#e74c3c;
color:white;
font-size:24px;
padding:5px;
text-align:center;
position: fixed;
left:0;
top:0;
width:100%;
transition: top .5s;
}
.gizle {
top: -90px;
}
.sabit {
top:0;
z-index: 9999;
}
</style>
</head>
<body>
<header class="yapiskan">LOGO位置</header>
<div id="lipsum">
<p>
这是文章内容啊。。。。
</p>
</div>
</body>
</html>
$(function(){
var cubuk_seviye = $(document).scrollTop();
var header_yuksekligi = $('.yapiskan').outerHeight();
alert( cubuk_seviye);
$(window).scroll(function() {
var kaydirma_cubugu = $(document).scrollTop();
if (kaydirma_cubugu > header_yuksekligi){$('.yapiskan').addClass('gizle');}
else {$('.yapiskan').removeClass('gizle');}
if (kaydirma_cubugu > cubuk_seviye){$('.yapiskan').removeClass('sabit');}
else {$('.yapiskan').addClass('sabit');}
cubuk_seviye = $(document).scrollTop();
});
});