Скролл замирает при использовании JQuery

203

13 апреля 2018, 14:02

Сделал я прилипающий к верху страницы блок, все прекрасно работает, но есть одна сильно раздражающая вещь, когда скроллишь страницу, происходит отказ скроллинга полный. Происходит это в непонятных обстоятельствах. Проверил на 10 раз, если отключить собственно скрипт прилипания, то скролл работает замечательно. Думал, может я что-то не так написал, попробовал 2 sticky плагина, и что странно, там та же проблема, но реже, я не понимаю с чем это вообще связано, может кто разбирается?

P.S. Приведен пример скролла именно девайсом (трекпадом и мышкой), если двигать ползунок, то такой проблемы не наблюдается.

Код моего скрипта:

$(document).on('scroll', function () {
    var func = $('body').find('.tool_functions'),
    content = $('body').find('.tool_content');
    if ($(window).scrollTop() >= 139) {
        func.addClass('scrolled');
        content.css('margin-top', func.outerHeight() + 10)
    } else {
        func.removeClass('scrolled');
        content.css('margin-top', 0)
    }
});

Answer 1

$(document).on('scroll', function () { 
    setTimeout(function() { 
      var func = $('body').find('.tool_functions'), 
      content = $('body').find('.tool_content'); 
      if ($(window).scrollTop() >= 139) { 
          func.addClass('scrolled'); 
          content.css('margin-top', func.outerHeight() + 10) 
      } else { 
          func.removeClass('scrolled'); 
          content.css('margin-top', 0) 
      } 
    }, 4); 
});

Попробуйте так. Возможно, браузер не успевает обрабатывать событие скрола, т.к. оно срабатывает слишком часто. :)