在“滚动”中设置脚本动画.它只运行一次

On-Scroll animate script. It runs only once

本文关键字：运行 一次 动画 滚动 脚本 设置      更新时间：2023-09-26

每当用户滚动第二个div时，我都希望运行此脚本。从"内容"div的意义上讲，第二个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时，脚本都必须运行。

这是在谷歌Chrome上运行的：http://jsfiddle.net/3kySD/2/我不知道为什么，但在我的FireFox（v22.0）上，它正在工作，但速度非常慢。我只更改了你代码中的一点点内容，这让你认为在我看来它不起作用。。。你做了这个测试：

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

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

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

Add.stop（）

$(".header").stop().animate({"height": "300px"},"slow");
相关文章：