Каков самый простой способ jQuery иметь «позицию: фиксированный» (всегда сверху) div?

Я относительно новичок в jQuery, но до сих пор я видел, что мне нравится. Я хочу, чтобы div (или любой элемент) находился в верхней части страницы, как будто «позиция: исправлена» работала в каждом браузере.

Я не хочу ничего сложного. Мне не нужны гигантские хаки CSS. Я бы предпочел, если просто использовать jQuery (версия 1.2.6) достаточно хорошо, но если мне нужен jQuery-UI-core, то это тоже хорошо.

Я пробовал $ (“# topBar”). ScrollFollow (); <- но это идет медленно … Я хочу, чтобы что-то появилось действительно исправлено.

Используя этот HTML:

This stays at the top

Это javascript, который вы хотите использовать. Он прикрепляет событие к прокрутке windows и перемещает элемент до тех пор, пока вы прокручиваете.

 $(window).scroll(function() { $('#myElement').css('top', $(this).scrollTop() + "px"); }); 

Как указано в комментариях ниже, не рекомендуется присоединять события к событию прокрутки – по мере того, как пользователь прокручивается, он запускает LOT и может вызывать проблемы с производительностью. Подумайте об использовании его с плагином debounce / throttle для Ben Alman, чтобы уменьшить накладные расходы.

Для тех браузеров, которые поддерживают «позицию: исправлено», вы можете просто использовать javascript (jQuery), чтобы изменить положение на «фиксированное» при прокрутке. Это устраняет прыткость при прокрутке с помощью перечисленных здесь $ (window) .scroll (function ()) решений.

Бен Надел демонстрирует это в своем учебнике: Создание элемента с фиксированной позицией с помощью jQuery

Красивый! Ваше решение было 99% … вместо «this.scrollY», я использовал «$ (window) .scrollTop ()». Что еще лучше, так это то, что для этого решения требуется только библиотека jQuery1.2.6 (дополнительных библиотек не требуется).

Причина, по которой мне нужна эта версия, в частности, заключается в том, что в настоящее время она поставляется с MVC.

Вот код:

 $(document).ready(function() { $("#topBar").css("position", "absolute"); }); $(window).scroll(function() { $("#topBar").css("top", $(window).scrollTop() + "px"); }); 

Подход HTML / CSS

Если вы ищете вариант, который не требует большого количества JavaScript (и все проблемы, возникающие с ним, например быстрые вызовы вызовов прокрутки), можно добиться такого же поведения, добавив обертку

и пару стилей. Я заметил гораздо более плавную прокрутку (без каких-либо элементов), когда я использовал следующий подход:

JS Fiddle

HTML

 
[Fixed Content]
[Scrolling Content]

CSS

 #wrapper { position: relative; } #fixed { position: fixed; top: 0; right: 0; } #scroller { height: 100px; overflow: auto; } 

JS

 //Compensate for the scrollbar (otherwise #fixed will be positioned over it). $(function() { //Determine the difference in widths between //the wrapper and the scroller. This value is //the width of the scroll bar (if any). var offset = $('#wrapper').width() - $('#scroller').get(0).clientWidth; //Set the right offset $('#fixed').css('right', offset + 'px');​ }); 

Конечно, этот подход может быть изменен для областей прокрутки, которые получают / теряют контент во время выполнения (что приведет к добавлению / удалению полос прокрутки).

Для тех, кто все еще ищет легкое решение в IE 6. Я создал плагин, который обрабатывает позицию IE 6: исправлена ​​проблема и очень проста в использовании: http://www.fixedie.com/

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

В проекте моему клиенту будет нужен плавающий ящик в другом div, поэтому я использую свойство CSS с верхним индексом, а не топ, чтобы мой плавающий ящик оставался в его родительском.

Давайте будем гением компьютера.