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

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

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

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

Ответы

Ответ 1

С помощью этого HTML:

<div id="myElement" style="position: absolute">This stays at the top</div>

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

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

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

Ответ 2

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

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

Ответ 3

Красивая! Ваше решение было 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");
});

Ответ 4

Подход HTML/CSS

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

JS Fiddle

HTML

<div id="wrapper">
  <div id="fixed">
    [Fixed Content]
  </div><!-- /fixed -->
  <div id="scroller">
    [Scrolling Content]
  </div><!-- /scroller -->
</div><!-- /wrapper -->

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');​
});

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

Ответ 5

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

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

Ответ 6

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