gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 09:01:16 24 4
gpt4 key购买 nike

我希望每当用户滚动第二个 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,脚本就必须运行。

最佳答案

这适用于 Google Chrome:http://jsfiddle.net/3kySD/2/我不知道为什么,但在我的 FireFox (v22.0) 上它可以工作,但速度非常慢。我只更改了您的代码中的一小部分,这导致您认为它在我看来不起作用...您进行了此测试:

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

我用这个替换了它,所以当内容 div 位于顶部时标题栏会最大,而当你阅读内容 div 时标题栏会较小:

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

关于javascript - 滚动动画脚本。它只运行一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17699962/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com