Каков самый простой способ jQuery иметь div 'position: fixed' (всегда вверху)?

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

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

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

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

Как указано в комментариях ниже, не рекомендуется присоединять события к событию прокрутки - по мере того, как пользователь прокручивает, оно запускается ОЧЕНЬ много и может вызвать проблемы с производительностью. Рассмотрите возможность использования его с плагином Бена Алмана дребезг / дроссель, чтобы уменьшить накладные расходы.

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

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

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

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

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

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

Подход 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');​
});

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