Javascript 滚动动画脚本。它只运行一次_Javascript_Jquery

Javascript 滚动动画脚本。它只运行一次

javascript jquery

Javascript 滚动动画脚本。它只运行一次,javascript,jquery,Javascript,Jquery,我希望每当用户滚动第二个div.second div时运行这个脚本，即“content”div.First div是header。滚动动画脚本 <!doctype html> <head> <script type="text/javascript"> $(document).ready(function(){ $('.content').scroll(function(){ if ($(this).scrollTop() > 1

我希望每当用户滚动第二个div.second div时运行这个脚本，即“content”div.First div是header。滚动动画脚本

<!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>


$（文档）.ready（函数（）{
$（'.content'）。滚动（函数（）{
如果（$（this）.scrollTop（）>100）
{
$（“.header”）.animate（{“height”：“300px”}，“slow”）；
}
其他的
{
$（“.header”）.animate（{“height”：“100px”}，“fast”）；
}
});
});
身体{
保证金：自动；
溢出：隐藏；
背景色：#000；
}
.外部{
宽度：800px；
边界：薄固体；
高度：900px；
背景色：#fff；
保证金：自动；
}
.包装纸{
宽度：800px；
位置：相对位置；
z指数：100；
高度：900px；
}
.标题{
宽度：800px；
高度：300px；
边框：薄实线#F00；
背景色：#666；
}
.内容{
宽度：800px；
高度：600px；
溢出：滚动；
}
虚拟内容，以便内容使div滚动

每当用户滚动div时，脚本必须运行。

Add.stop（）

这是谷歌Chrome上的工作：我不知道为什么，但在我的FireFox（v22.0）上，它工作正常，但速度非常慢。我只改变了你代码中的一点，这让你觉得在我看来它不起作用。。。您进行了以下测试：

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

我用这个替换了它，因此当content div位于顶部时，标题栏将最大，而当您阅读content div时，标题栏将更小：

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

if（$（this）.scrollTop（）<100）

你能提供一个please吗？或者html来配合上面的hi-Pete我已经添加了html和css代码。谢谢你的回复。嗨，J先生，我已经添加了JSFIDLE，但我不知道如何链接到这里。谢谢你的回复。请检查此链接您是否同意您所说的有效内容不在您的JSFIDLE中？我明白了，您忘记添加jQuery了。这是一个更新版本的Hi Sbml，我想脚本运行时，用户滚动的内容div。感谢您的回应。在我添加了.stop（）之后，它阻止了脚本一次运行。您好，先生，谢谢您的解决方案。正如你所说，firefox的速度非常慢，这让我觉得它不起作用。谢谢你的帮助。如果你认为它关闭了你的请求，你应该点击我答案左边的复选框。否则，你可以自由说出你想要什么，但一个新问题可能更合适。

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