On-Scroll animate script. It runs only once
Question
I want this script run whenever the user scrolls the second div. Second div in the sense the "content" div. First div is header. On-Scroll animate script.
<!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>
Script must run whenever the user scroll the div.
2 answers
solution1
0 2013-07-17 13:49:17
添加.stop（）
$(".header").stop().animate({"height": "300px"},"slow");
solution2
0 ACCPTED 2013-07-18 07:31:42
This is working on Google Chrome : http://jsfiddle.net/3kySD/2/ I don't know why but on my FireFox (v22.0) it is working but extremely slow. I have changed only a little thing in your code which leads you to think it wasn't working in my opinion... You had this test :
if ($(this).scrollTop() > 100)
I replaced it with this one, so the header bar will be biggest when the content div is at the top, and will be smaller when you are reading the content div:
if ($(this).scrollTop() < 100)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.