Как заставить работать сработавшую прокрутку jquery

Question

У меня есть веб-страница, на которой я хочу, чтобы окно появлялось, когда пользователь прокручивает до определенной точки.Поскольку эта страница является блогом, эта точка должна быть гибкой.

Пока это мой код:

    $(document).ready(function(){
      var navoff = $('.navigation').offset();
      $(window).scroll(function(){
          var y = $(window).scrollTop();
          var windowheight = $(window).height();
          var totalheight = navoff.top - (windowheight / 2);

        if(y > totalheight) {
            $('.box').animate({ 'bottom': '0px' });
            }else{
            $('.box').animate({ 'bottom': '-140px' });
            }
});
});

Навигация - это элемент, расположенный прямо под сообщением в блоге, поэтому я решил, что смещениеработать лучше, чем вычислять, когда div содержимого блога достиг верхней части экрана.Код выше работает, коробка выдвигается снизу, но есть огромная задержка.В среднем сценарию требуется около пяти секунд, чтобы показать коробку, и десять, чтобы его убрать.Почему задержка?И можно ли это сделать мгновенно?

Answer 1

Вы можете использовать плагин jQuery для этого.

http://kitchen.net -perspective.com / с открытым исходным кодом / прокрутка следуйте /

Вам просто нужно рассчитать смещение, которое вы хотите.

Также взгляните на эту другую тему: Как заставить div следовать плавной прокрутке с помощью jQuery?

Answer 2

Попробуй это.Я удалил часть кода из прокрутки, чтобы он не вычислялся при каждой прокрутке пользователя.

РЕДАКТИРОВАТЬ: Также используйте метод debounce eduardocereto предложено

 $(document).ready(function(){
     var navoff = $('.navigation').offset().top;
     var windowheight = $(window).height();
     $(window).scroll(function(){
         var y = $(window).scrollTop();
         var totalheight = navoff - (windowheight / 2);

         if(y > totalheight) {
             $('.box').animate({ 'bottom': '0px' });
         }else{
             $('.box').animate({ 'bottom': '-140px' });
         }
     });
});