1

ユーザーが 2 番目の div をスクロールするたびに、このスクリプトを実行します。「コンテンツ」divという意味での2番目のdiv。最初の div はヘッダーです。オンスクロール アニメーション スクリプト。

<!doctype html>
<head>
<script type="text/javascript">
$(document).ready(function(){
    $('.content').scroll(function(){
        if ($(this).scrollTop() > 100)
        {
            $(".header").animate({"height": "300px"},"slow");
        }
        else
        {
            $(".header").animate({"height": "100px"},"fast");
        }
    });
});
</script>
<style>
body{
margin:auto;
overflow:hidden;
background-color:#000;
}
.outer{
width:800px;
border:thin solid;
height:900px;
background-color:#fff;
margin:auto;
}
.wrapper{
width:800px;
position:relative;
z-index:100;
height:900px;
}
.header{
width:800px;
height:300px;
border: thin solid #F00;
background-color:#666;
}
.content{
width:800px;
height:600px;
overflow:scroll;
}
</style>
</head>
<body>
<div class="outer">
<div class="wrapper">
<div class="header"></div>
<div class="content"> 
<p>Dummy content so that the content makes the div to scroll.</p>
</div>
</div>
</div>
</body>
</html>

ユーザーが div をスクロールするたびに、スクリプトを実行する必要があります。

4

2 に答える 2

0

これは Google Chrome で動作しています: http://jsfiddle.net/3kySD/2/ 理由はわかりませんが、私の FireFox (v22.0) では動作していますが、非常に遅いです。私はあなたのコードのほんの少しだけを変更したため、私の意見では機能していないと思うようになりました...あなたはこのテストを受けました：

if ($(this).scrollTop() > 100)

これをこれに置き換えたので、コンテンツ div が上部にあるときはヘッダー バーが最大になり、コンテンツ div を読んでいるときは小さくなります。

if ($(this).scrollTop() < 100)
于 2013-07-18T07:31:42.510 に答える