正在发生的事情根本算不了什么。我向下滚动，栏保持相同的大小。我向上滚动也没有任何反应。如下所示将代码放入三个单独的文件中并不像 JFiddle 那样工作。
基本上，我一直在尝试实现这个小提琴，但由于某种原因，我可以看到它在网站上运行，但它不适用于我的版本。
小提琴：http: //jsfiddle.net/JJ8Jc/258/
也许我错误地链接了 JavaScript 或其他东西。
我正在使用谷歌浏览器。
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nav</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
<script type="text/javascript" src="nav.js"></script>
</head>
<body>
<div id="header_nav">
<div id="header_div">
div
</div>
</div>
CSS：
body {
height:2000px;
width:100%;
background-color:#F0F0F0;
}
#header_nav {
width:100%;
height:100px;
padding-top:10px;
padding-left:10px;
background-color:#fff;
position:fixed;
top:0;
left:0;
text-align:center;
border-bottom:1px solid #c1c1c1;
}
#header_div
{
position:relative;
background-color:#14a;
color:#c1c1c1;
height:30px;
width:40px;
display:inline-block;
padding-top: 10px;
}
JavaScript：
$(function(){
$('#header_nav').data('size','big');
$('#header_div').data('size','big');
});
$(window).scroll(function(){
if($(document).scrollTop() > 0)
{
if($('#header_nav').data('size') == 'big')
{
$('#header_nav').data('size','small');
$('#header_nav').stop().animate({
height:'40px'
},600);
$('#header_div').data('size','small');
$('#header_div').stop().animate({
height:'20px',
width: '20px',
'padding-top' : 5
},600);
}
}
else
{
if($('#header_nav').data('size') == 'small')
{
$('#header_nav').data('size','big');
$('#header_nav').stop().animate({
height:'100px'
},600);
$('#header_div').data('size','big');
$('#header_div').stop().animate({
height:'30px',
width: '40px',
'padding-top' : 10
},600);
}
}
});