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

Question

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

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

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

Answer 1

Использование этого HTML:

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

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

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

---

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

Answer 2

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

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

Answer 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");
});

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

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

Answer 5

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

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

Answer 6

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