1

我希望在用户滚动第二个 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 时，脚本必须运行。

4

2 回答 2

0

添加 .stop()

$(".header").stop().animate({"height": "300px"},"slow");
于 2013-07-17T13:49:17.907 回答
0

这适用于谷歌浏览器：http: //jsfiddle.net/3kySD/2/ 我不知道为什么，但在我的 FireFox (v22.0) 上它工作但非常慢。我在你的代码中只改变了一点点，这让你认为它在我看来不起作用......你有这个测试：

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

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

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