Сценарий анимации On-Scroll. Он работает только один раз

Я хочу, чтобы этот скрипт выполнялся всякий раз, когда пользователь прокручивает второй div. Второй div в смысле «content» div. Первый div - это заголовок. Сценарий анимации On-Scroll.Сценарий анимации On-Scroll. Он работает только один раз

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

источник

2013-07-17 Ravi

Можете ли вы предоставить [jsfiddle] (http://jsfiddle.net/), пожалуйста? – MisterJ

или html, чтобы перейти с вышеуказанным – Pete

Привет, Пит. Я добавил коды html и css. Спасибо за ответ ур. – Ravi

Это работает на Google Chrome: http://jsfiddle.net/3kySD/2/ Я не знаю почему, но на моем FireFox (v22.0) он работает, но очень медленно. я изменил лишь небольшую вещь в вашем коде, который ведет вас думать, что это не работает, на мой взгляд ... Вы должны были это испытание:

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

я заменил его с этим, так что панель заголовка будет самым большим, когда ДИВ содержание в верхней части, и будет меньше, когда вы читаете DIV контента:

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

источник

2013-07-18 07:31:42 MisterJ

Здравствуйте, MisterJ, Спасибо за ваше решение. Как я сказал, это очень медленно в firefox, что привело меня к мысли, что это не работает. Спасибо за вашу помощь. – Ravi

Если вы думаете, что закроете ваш запрос, вам следует нажать на флажок слева от моего ответа. Кроме того, вы можете свободно говорить, что хотите, но новый вопрос может быть более уместным. – MisterJ

Добавить .stop()

$(".header").stop().animate({"height": "300px"},"slow");

источник

2013-07-17 13:49:17 Sbml

Hi Sbml, я хочу, чтобы скрипт запускался всякий раз, когда пользователь прокручивал содержимое div. Спасибо за ответ ур. После того, как я добавил .stop(), это предотвратило запуск сценария с одного раза. – Ravi

Сценарий анимации On-Scroll. Он работает только один раз

ответ

Смежные вопросы