У мене є анімація, яку потрібно запустити один разscrollTop () потрапляє на певну позицію на сторінці. Ця частина працює чудово, але те, що я хочу, - це щоб анімація поверталася назад, коли я прокручую назад сторінку, повертаючи елемент у вихідне положення.
Код у моєму прикладі працює нормально, а JSідентичний веб-сайту, над яким я працюю локально, але в Chrome цей елемент не повертається до його початкового положення, коли ви прокручуєте сторінку назад. JQuery - це єдиний Javascript, на який я посилаюся, тому немає конфліктів, і в CSS немає нічого такого, що це також повинно було б запобігти. Я все ще досить зелений, коли мова йде про JQuery, тож потерпіть мене. Я думаю, що, можливо, твердження if / else хіба не найкращий спосіб досягти цього? Будь-які думки?
Відповіді:
1 для відповіді № 1Це працює для мене, використовуючи Chrome 31 на Mac. Однак, ви повинні спробувати наступні модифікації для підвищення продуктивності:
- Використовуйте
.stop(true, true)перед тим, як прив'язати анімацію, щоб переконатися, що анімація закінчується. - Вимкніть або зніміть подію зміни розміру, щоб вона не запускалася занадто часто, економлячи кількість обчислень, необхідних для виконання, і запобігає швидкому переключенню між двома кінцевими станами анімації занадто часто.
- Отримайте позицію прокрутки за допомогою
$(window).scrollTop()замість на тілі.
Я вирішив використовувати плагін jQuery throttle + debounce, доступний тут: http://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js
$(document).ready(function(){
$(window).scroll($.throttle(100, function(){
var position = $("window").scrollTop();
if(position >= 200){
$("#foo").stop(true,true).animate({left: "200px"}, "fast");
} else{
$("#foo").stop(true,true).animate({left: 0}, "fast");
}
}));
});