Question

每当用户滚动第二个div时，我希望此脚本运行。第二个div在意义上是“内容”div。第一个div是标题。 On-Scroll动画脚本。

<!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，脚本就必须运行。

Answer 1

添加.stop（）

$(".header").stop().animate({"height": "300px"},"slow");

Answer 2

这适用于Google Chrome：http://jsfiddle.net/3kySD/2/ 我不知道为什么但是在我的FireFox（v22.0）上它工作但非常慢。我在你的代码中只更改了一个小东西，导致你认为它在我看来不起作用......你有这个测试：

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

我用这个替换它，所以当内容div位于顶部时标题栏将是最大的，当您阅读内容div时标题栏将更小：

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

On-Scroll动画脚本。它只运行一次

2 个答案: