1

起こっていることはまったく何もありません。下にスクロールしても、バーは同じサイズのままです。上にスクロールしても何も起こりません。以下のようにコードを 3 つの個別のファイルに入れると、JFiddle のように機能しません。

基本的に、私はこのフィドルを実装しようとしていますが、何らかの理由で、ウェブサイトで動作しているのを見ることができますが、私のバージョンでは動作しません。

フィドル: http://jsfiddle.net/JJ8Jc/258/

たぶん、JavaScript を間違ってリンクしているか、何かです。

Google Chrome を使用しています。

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);
    }  
}
});
4

2 に答える 2

1

投稿した HTML には jQuery ライブラリが含まれていません。

F12 を押して$ is undefinedください。コンソールに表示されているはずです。

于 2013-08-30T16:04:51.537 に答える
1

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>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'><script>
</head>
<body>
<div id="header_nav">
    <div id="header_div">
        div
    </div>
</div>

追加した行を確認してください。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'><script>

私が覚えたので、それが正しいかどうかはわかりません

于 2013-08-30T16:14:30.317 に答える