Скачет страница при прокрутке

[mdss]

Имеется скрипт

	var sticky = $('#header');
	var catfix = $('.visible-cat-main');
	$(window).scroll(function() {
		var scroll = $(window).scrollTop();
		if (scroll >= 82) {
			sticky.removeClass('default').addClass('fixed');
			catfix.removeClass('default').addClass('fixed');
		} else {
			sticky.addClass('default').removeClass('fixed');
			catfix.addClass('default').removeClass('fixed');
		}
	});

Кусок стилей

#header.fixed {
	position:fixed;
	top:-82px;
	width:100%;
}

Проблема в следующем. Если страница по высоте почти не имеет прокрутки, то при попытке этой самой прокрутки все скачет и класс fixed не задается. При наличии нормальной высоты страницы, все работает как надо.
В какую сторону копать вообще? В чем моя ошибка?

 

[Solus_Rex]

Имеется скрипт

    var sticky = $('#header');
    var catfix = $('.visible-cat-main');
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        if (scroll >= 82) {
            sticky.removeClass('default').addClass('fixed');
            catfix.removeClass('default').addClass('fixed');
        } else {
            sticky.addClass('default').removeClass('fixed');
            catfix.addClass('default').removeClass('fixed');
        }
    });

Кусок стилей

#header.fixed {
    position:fixed;
    top:-82px;
    width:100%;
}

Проблема в следующем. Если страница по высоте почти не имеет прокрутки, то при попытке этой самой прокрутки все скачет и класс fixed не задается. При наличии нормальной высоты страницы, все работает как надо.
В какую сторону копать вообще? В чем моя ошибка?

Это скорее не ответ на ваш вопрос, а тычок пальцем туда где всё работает.
Посмотрите вот тут:
Для просмотра ссылки Войди или Зарегистрируйся
Там человек сделал подробное описание, как сделать прилипающее меню, с примерами. А потом в огромном листе с комментариями вносит ещё кучу правок для людей под их задачи. Есть стойкое ощущение, что в комментах есть ответ на Ваш вопрос.
Я это меню пару раз использовал. На маленьких страницах оно работало без дёрганий. Если будете смотреть - то я использовал вариант не с полным дублирование меню, а там где оно при прилипании изменяется. И где размер задан в px.
Для просмотра ссылки Войди или Зарегистрируйся
Но в комментах есть варианты не в абсолютных единицах, а фиксация при окончании блока header.

Если докопаетесь до правды - черкните, что было не так, ок?

 

[mdss]

Я это меню пару раз использовал. На маленьких страницах оно работало без дёрганий. Если будете смотреть - то я использовал вариант не с полным дублирование меню, а там где оно при прилипании изменяется. И где размер задан в px.
Для просмотра ссылки Войди или Зарегистрируйся
Но в комментах есть варианты не в абсолютных единицах, а фиксация при окончании блока header.

Если докопаетесь до правды - черкните, что было не так, ок?

убрал несколько параграфов в примере, появились дергания
Для просмотра ссылки Войди или Зарегистрируйся

 

[Absolute]

Дергания происходят из-за того, что смена класса несет за собой смену высоты документа. Просто посмотрите, что возвратит $(document).height(); в каждом из двух состояний.
Наиболее простой выход - менять position, не затрагивая другие параметры, которые могут повлиять на высоту.

#header .default {
position: absolute;
top:-82px;
width:100%;
}

#header .fixed {
position: fixed;
top:-82px;
width:100%;
}

 

[Solus_Rex]

убрал несколько параграфов в примере, появились дергания
Для просмотра ссылки Войди или Зарегистрируйся

Так я же говорю - посмотрите у него на странице можно даже поиском - "Ctrl+F + дерг"
Он там выложил вариант с решением такой же проблемы. Вот такой:
Для просмотра ссылки Войди или Зарегистрируйся
Я его проверил - он работает.