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

Тема в разделе "JavaScript", создана пользователем mdss, 6 апр 2015.

Модераторы: ZiX
  1. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.130
    Симпатии:
    668
    Имеется скрипт
    Код:
    	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 не задается. При наличии нормальной высоты страницы, все работает как надо.
    В какую сторону копать вообще? В чем моя ошибка?
     
  2. Solus_Rex

    Solus_Rex

    Регистр.:
    15 янв 2012
    Сообщения:
    426
    Симпатии:
    179
    Это скорее не ответ на ваш вопрос, а тычок пальцем туда где всё работает.
    Посмотрите вот тут:
    http://webcomplex.com.ua/jquery/delaem-fiksirovannoe-menyu-pri-prokrutke-stranicy.html
    Там человек сделал подробное описание, как сделать прилипающее меню, с примерами. А потом в огромном листе с комментариями вносит ещё кучу правок для людей под их задачи. Есть стойкое ощущение, что в комментах есть ответ на Ваш вопрос.
    Я это меню пару раз использовал. На маленьких страницах оно работало без дёрганий. Если будете смотреть - то я использовал вариант не с полным дублирование меню, а там где оно при прилипании изменяется. И где размер задан в px.
    http://jsfiddle.net/Solus_Rex/j5gfhjf5/2/
    Но в комментах есть варианты не в абсолютных единицах, а фиксация при окончании блока header.

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

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.130
    Симпатии:
    668
    убрал несколько параграфов в примере, появились дергания
    http://jsfiddle.net/j5gfhjf5/3/
     
  4. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    364
    Симпатии:
    182
    Дергания происходят из-за того, что смена класса несет за собой смену высоты документа. Просто посмотрите, что возвратит $(document).height(); в каждом из двух состояний.
    Наиболее простой выход - менять position, не затрагивая другие параметры, которые могут повлиять на высоту.
    Код:
    #header .default {
    position: absolute;
    top:-82px;
    width:100%;
    }
    
    #header .fixed {
    position: fixed;
    top:-82px;
    width:100%;
    }
     
    mdss нравится это.
  5. Solus_Rex

    Solus_Rex

    Регистр.:
    15 янв 2012
    Сообщения:
    426
    Симпатии:
    179
    Так я же говорю - посмотрите у него на странице можно даже поиском - "Ctrl+F + дерг"
    Он там выложил вариант с решением такой же проблемы. Вот такой:
    http://jsfiddle.net/Solus_Rex/71w5bdm6/1/
    Я его проверил - он работает.