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

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

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

Я пробовал $("#topBar").scrollFollow ();

35
css jquery positioning

6 ответов

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

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

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

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

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

60

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

Бен надел демонстрирует это в своем учебнике: создаем иногда-стационарный элемент с jQuery

7

красиво! Ваше решение было 99%... вместо этого.scrollY", я использовал "$(окно).scrollTop()". Еще лучше то, что для этого решения требуется только jQuery1.2.6 Библиотека (дополнительные библиотеки не требуются).

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

вот код:

$(document).ready(function() {
    $("#topBar").css("position", "absolute");
});

$(window).scroll(function() {
    $("#topBar").css("top", $(window).scrollTop() + "px");
});
6

HTML/CSS подход

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

JS Скрипка

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

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

2

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

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

1

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

0