Заголовок jQuery Stick для прокрутки

Я сделал красноречиво небольшой фрагмент, чтобы сделать надглазничную палку сверху. Но так как, как я уже сказал, я ни в коем случае не гениев js или jQuery, а на самом деле далеко от него - у меня есть сомнения в моих собственных способностях кодирования.

Вопросы:

  • 1 - похоже, есть много плагинов (и много вопросов также на этом самом сайте) с гораздо большим количеством кода, чем мой фрагмент - что я отсутствует?? Что я делаю неправильно?
  • 2 - будет ли это работать в кросс-браузере?
  • 3.. и это небольшая проблема, как избежать малого "прыжка", которое происходит? (если вы перейдете к скрипке и прокрутите медленно - вы увидите, что главный div "прыгает", когда вызывается script. Я попытался добавить еще один класс .pad в нижние divs -

добавлен класс: .pad при вызове script.

.pad {обивка-топ: 42px;}

но, похоже, это не работает правильно: http://jsfiddle.net/obmerk99/VvKq3/2/

  • 5. Как рассчитать реальную позицию div? когда я пытаюсь что-то вроде этого:
var top = jQuery(window).scrollTop();
var div_top = jQuery('#header_stick').offset().top;
if (top > div_top) // height of float header;

он прыгает... http://jsfiddle.net/obmerk99/VvKq3/4/

  • 6 любые другие предложения приветствуются.
2 ответа

"Переход" происходит потому, что элемент занимал пространство в родительском элементе, а когда вы меняете свое положение на fixed, это уже не так. Я не знаю, как наилучшим образом справиться с этим, но один вариант будет добавлять небольшой диапазон (возможно, с одним пространством) непосредственно перед вашим #header_stick с той же высотой, поэтому, когда класс Изменено там все равно будет что-то там, чтобы учитывать разницу в высоте. (Обновление: ваше решение для пэдов, вероятно, самое лучшее, один раз done right, см. ниже)

Ваше дополнение может также работать при условии, что: 1) вы не забыли удалить этот класс, когда пользователь прокручивается вверх (в вашей скрипке я вижу, что вы добавляете его, но не видите, что вы его удаляете); 2) Вы получаете высоту справа - я все еще не мог присмотреться к вашему коду, поэтому я не знаю, где вы ошибаетесь. (Edit: проблема заключалась в том, что ваш класс .pad использовал высоту плавающего заголовка, а не заголовок палки - исправление этого и удаление класса привело к тому, что я считаю правильный результат)

О реальной позиции div, вы пробовали вычесть смещение div из смещения родительского элемента? Таким образом, у вас будет свое положение относительно родителя (обратите внимание на такие вещи, как границы, хотя - я недавно ответил на другой вопрос, где такие детали были такими).

Обновление: ваша проблема здесь заключается в том, что, когда позиция изменяется на фиксированную, смещение также сильно варьируется. Я бы предложил рассчитать правильную высоту, один раз, а затем сохранить ее где-нибудь, чтобы функция прокрутки могла ее использовать. Другими словами, не вычисляйте его во время прокрутки, что значительно затрудняет поиск правильной функции для переключения класса.

Кроме этого, я думаю, что вы код в порядке, и я считаю, что он будет работать и с кросс-браузерами (по крайней мере совместимыми со стандартами, ничего не могу сказать о старых версиях IE). Очень проницательный тоже, я всегда задавался вопросом, как этот "трюк" работал, теперь я вижу его проще, чем я себе представлял...


Вы можете попробовать это. Я сделал более короткую версию для более легкого анализа. скрипка здесь

<div id="ontop">floating heading</div>
<header>sticky heading</header>
<div id="wrapper"> 
 12345678910
</div>
#ontop {width:100%; height:80px; background-color:yellow;}
header {width:100%; height:20px; background-color:lightgrey; }
#wrapper {background-color:lightblue; height:5000px;}
.navfixed {position: fixed; top: 0px; z-index: 100; width:100%; display:block; margin-bottom:120px; } 
.wrapperBelow{margin-top:22px;}
$(function () {
 var elem = $('header'),
 wrapperElem = $('#wrapper'),
 elemTop = elem.offset().top;
 $(window).scroll(function () {
 elem.toggleClass('navfixed', $(window).scrollTop() > elemTop);
 wrapperElem.toggleClass('wrapperBelow', $(window).scrollTop() > elemTop);
 }).scroll();
});

licensed under cc by-sa 3.0 with attribution.