Альтернатива функции прокрутки jQuery?

Question

У меня есть скрипт JQuery следующим образом:

$(document).ready(function(){ 

$(window).scroll(function(){ 
    if ($(this).scrollTop() > 100) { 
     $('#algemeen').css('position','fixed'); 
     $('#algemeen').animate({ 
      top: '0px', 
      left: '70%', 
      width: '10%' 
     }, 200); 
    } else { 
     $('#algemeen').css('position','absolute'); 
     $('#algemeen').animate({ 
      top: '300px', 
      left: '100px', 
      width: '200px' 
     }, 200); 
    } 
}); 

}); 

Как вы можете видеть, у меня есть этот DIV «#algemeen», который меняет свое положение, когда страница прокручивается вниз 100px. Проблема в том, что она очень отсталая, и она часто остается в положении «downscroll», когда я прокручиваю вверх. Есть ли лучший способ достичь моей цели?

Заранее благодарен!

Answer 1

Лучше всего использовать CSS transition property и jQuery для add/remove класс. Пожалуйста, проверьте this Fiddle, мы переключаем класс animated:

Javascript:

$(document).on('ready', function() { 
    var scroller = $('#algemeen'); 
    $(window).on('scroll', function(){ 
     if ($(this).scrollTop() > 100) { 
      scroller.addClass('animated'); 
     } else { 
      scroller.removeClass('animated'); 
     } 
    }); 
}); 

Чем CSS:

#algemeen { 
    position: absolute; 
    top: 300px; 
    left: 100px; 
    width: 200px; 
    transition: all linear .2s; 
} 
#algemeen.animated { 
    position: fixed; 
    top: 0; 
    left: 70%; 
    width: 10%; 
} 

Это лучше, потому что:

• браузера анимации быстрее, чем сценарий, они используют меньше ресурсов центрального процессора, что они лучше оптимизированы и из-за того, что они часто выглядят лучше
• легче изменить CSS, чем сценарий, вы можете применить медиазапросы и т.д.

This article может убедить вас (имеет приятную демонстрацию).

Answer 2

Что-то, что мне нравится делать, - это прослушивание событий в любое время, когда вы прокручиваете, и когда window.scrollY добирается до нужной точки, я запускаю анимации/функции/что угодно. Я также могу добавить значение boolean или int, которое изменяется, когда вы применяете изменение, чтобы вы не постоянно вносили изменения каждый раз, когда выполняется инструкция if или else. (возможно, это задерживает вас)

var changesMade = 0; 

window.onscroll = function() { 
    if (window.scrollY > 100 && changesMade != 1) { 
     $('#algemeen').css('position','fixed'); 
     $('#algemeen').animate({ 
      top: '0px', 
      left: '70%', 
      width: '10%' 
     }, 200); 
     changesMade = 1; 
    } else if (window.scrollY < 100 && changesMade != 0) { 
     $('#algemeen').css('position','absolute'); 
     $('#algemeen').animate({ 
      top: '300px', 
      left: '100px', 
      width: '200px' 
     }, 200); 
     changesMade = 0; 
    } 
} 

Надеюсь, это полезно.