Слайд в div с фиксированным положением с JQuery

Question

У меня есть кнопка прокрутки вверх и фиксированная позиция. Я хочу, чтобы эта кнопка скользила в нижней части экрана после прокрутки 400 пикселей. Я могу заставить его работать с fadein и fadeout. Это код кнопки.

<a href="#top" id="scrolltop"><img src="images/upbutton.png" alt="scroll to top"/></a> 

#scrolltop { 
position:fixed; 
height:38px; 
width:38px; 
background-color:#444; 
right:15px; 
bottom:15px; 
z-index:100; 
} 



$(document).scroll(function() { 
     var y = $(this).scrollTop(); 
     if (y > 1000) { 
      $('#scrolltop').animate({bottom: 100}); 
     } else { 
      $('#scrolltop').animate({bottom: -100}); 
     } 
}); 

Answer 1

Одна проблема в том, что ваш тестируется 1000 вместо 400.

Кроме того, что scroll событие вызывается несколько раз во время прокрутки. И потому, что animate функция JQuery является наращиваемых Вы заканчиваете с несколькими анимациями в каждом направлении и длительных задержек во время ожидания для каждого, чтобы закончить ..

Так что вам нужно более строгую логику ..

• не анимировать если элемент уже анимировать, использовать :animated jquery selector в сочетании с .is() method
• также проверить, если элемент уже находится в правильном месте, прежде чем пытаться оживить к нему, добавить/удалить class как флаг, чтобы сделать это
• также хорошая идея кэшированных переменных, которые вы повторно использовать

поэтому сценарий становится

var scr = $('#scrolltop'); 
$(document).scroll(function() { 
    var y = $(this).scrollTop(); 
    if (y > 400) { 
     if (scr.is('.off') && !scr.is(':animated')) { 
      scr.animate({bottom: 100}, function() { 
       scr.removeClass('off'); 
      }); 
     } 
    } else { 
     if ((!scr.is('.off')) && (!scr.is(':animated'))) { 
      scr.animate({bottom: -100}, function() { 
       scr.addClass('off'); 
      }); 
     } 
    } 
}); 

Demo вhttp://jsfiddle.net/gaby/7eYdB/