Как убрать дергание при скролле?

Question

[Vince]

Приветствую.

Вопрос наверно простой, но решение пока найти не смог
memlink.ru/glaze/service
при прокрутке дергается и меню, которое должно прилипать - не прилипает и не появляется.

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

Спасибо.

Comments

[Zhainar]

попробуйте убрать скрипт выпадания меню после скролла, а шапку position: fixed сделать.

[Vince]

А можете расшифровать что делает этот код?
Какие тут действия?

setTimeout(function() {
  $('.animated:not(#top-link)').waypoint(function() {
      $(this).addClass('start-anim');
  },{offset: '97%'});
}, 100);

var header_offset = -$('#masthead').outerHeight();

$('.sticky_header #masthead').waypoint('sticky', {
  offset: header_offset
});

$('.sticky_header .wide-nav').waypoint('sticky', {
  offset: header_offset
});

$('#main-content').waypoint(function() {
   $('body.has-dark-header:not(.org-dark-header)').toggleClass('dark-header');
   $('.header-wrapper').toggleClass('before-sticky');
   $('.sticky_header #masthead, .wide-nav').toggleClass('move_down');
},{offset: '-200px'});

Answer 1

[Alex]

Время присвоения
stuck
и
move_down
Классов разное + позднее

Comments

[Alex]

// анонимная функция (function(){ })(), чтобы переменные "a" и "b" не стали глобальными
var a = null;
var b = null;
function load(){
a = document.getElementById('aside1');

window.addEventListener('scroll', Ascroll, false);
document.body.addEventListener('scroll', Ascroll, false); // если у html и body высота равна 100%
}
function Ascroll() {

if (b == null) { // добавить потомка-обёртку, чтобы убрать зависимость с соседями
var Sa = getComputedStyle(a, ''), s = '';
for (var i = 0; i < Sa.length; i++) { // перечислить стили CSS, которые нужно скопировать с родителя
if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) {
s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '
}
}
b = document.createElement('div'); // создать потомка
b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
a.insertBefore(b, a.firstChild); // поместить потомка в цепляющийся блок первым
var l = a.childNodes.length;
for (var i = 1; i < l; i++) { // переместить во вновь созданного потомка всех остальных потомков (итого: создан потомок-обёртка, внутри которого по прежнему работают скрипты)
b.appendChild(a.childNodes[1]);
}
a.style.height = b.getBoundingClientRect().height + 'px'; // если под скользящим элементом есть другие блоки, можно своё значение
a.style.padding = '0';
a.style.border = '0'; // если элементу присвоен padding или border
}
if (a.getBoundingClientRect().top <= 0) { // elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера
b.className = 'sticky';
} else {
b.className = '';
}
window.addEventListener('resize', function() {
a.children[0].style.width = getComputedStyle(a, '').width
}, false); // если изменить размер окна браузера, измениться ширина элемента
}

[Alex]

.sticky {
position: fixed;
top: 0px;
z-index: 101;
}

[Vince]

На самом деле я в скрипте поставил, чтобы прилипал другой немного кусок, а не тот который был изначально и поэтому косяк. Надо всё настроить по соответствию и надеюсь, что всё заработает без дерганий.
Спасибо)