Прокручиваемое содержимое таблицы, когда верхняя строка имеет фиксированную позицию - PullRequest
Новая
       19

Прокручиваемое содержимое таблицы, когда верхняя строка имеет фиксированную позицию

0 голосов
/ 10 июня 2011

Страницы документов моей компании должны быть размещены, как указано в этом изображении :

Элементы iframe обрабатываются программным обеспечением команды документооборота MadCapFlare.Проблема, с которой мы сталкиваемся, заключается в том, что мы хотели бы, чтобы хлебные крошки и заголовок / логотип темы были фиксированными элементами вверху страницы и чтобы содержимое темы можно было прокручивать, не пропуская под фиксированными элементами вверху.

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

Встроенный контент выглядит следующим образом: 

<body>
  <table class="superheader">
    <tr class="topRow">
      <td class="headingBreadcrumbs">
        <div class="breadcrumbs">breadcrumb trail</div>
        <h1>topic heading</h1>
      </td>
      <td class="headingLogo">
        <img src="logo.png">
      </td>
    </tr>

    <tr class="contentRow">
      <td class="content" colspan="2">topic content - full of tables, divs,
      paragraphs, lists, etc...</td>
    </tr>
  </table>
</body>

Я не женат на внутренней таблице.Я приветствую другое решение, если:

  • хлебные крошки / заголовки / логотипы зафиксированы сверху, поэтому они всегда видны.
  • содержимое темы не скрываетсяпод фиксированным верхним элементом, например при загрузке страницы или при щелчке ссылки на привязку.
  • пользователь может прокручивать содержимое с помощью полосы прокрутки браузера.

Ответы [ 3 ]

1 голос
/ 10 июня 2011

Делая это в точности так, как вы упоминаете, с полосами прокрутки, которые являются родными, говорит мне «Фреймы», хотя теперь мне приходится глупо избивать себя за предложение. Рамы раздражали еще в начале 90-х, когда я начал свою карьеру ....

Что-то вроде макет JQuery , вероятно, в конечном итоге сделает для вас намного больше и может добавить возможность пользователю настраивать (в определенной степени) свое рабочее пространство.

Поскольку iFrames также уже не совсем в моде, вы можете нарисовать эту информацию непосредственно в dom через jQuery Ajax или тому подобное. По крайней мере, я думаю, что подойду к этому.

0 голосов
/ 30 августа 2011

Попробуйте это:

http://jsfiddle.net/k2R3G/

Я создал этот плагин jquery для решения аналогичной проблемы, с которой у меня был центрированный контейнер (табличные данные), и я хотелзаголовок, чтобы исправить в верхней части страницы, когда список был прокручен.Одна из проблем заключалась в том, что, когда заголовок становился фиксированным, содержимое под ним подпрыгивало на странице (не очень хорошо).Этот плагин компенсирует «фиксированный» элемент и позволяет расположить содержимое под ним и прокручивать его, как и положено, без необходимости устанавливать margin-top для моего контента, поэтому заголовок может изменяться по высоте.

Вjsfiddle, я немного изменил ваш макет, чтобы использовать элементы списка вместо таблиц.

Вот ссылка на этот плагин jquery, который может решить эту проблему:

https://github.com/bigspotteddog/ScrollToFixed

Описание этого плагина выглядит следующим образом:

Этот плагин используется для закрепления элементов в верхней части страницы, если бы элемент прокручивался вне поля зрения по вертикали;однако, он позволяет элементу продолжать двигаться влево или вправо с горизонтальной прокруткой.

При наличии опции marginTop, элемент перестанет двигаться вертикально вверх, как только вертикальная прокрутка достигнет целевой позиции;но элемент все равно будет перемещаться по горизонтали при прокрутке страницы влево или вправо.Как только страница будет прокручена вниз, пройдя целевую позицию, элемент будет восстановлен в исходное положение на странице.

Этот плагин был протестирован в Firefox 3/4, Google Chrome 10/11, Safari.5, и Internet Explorer 8 / 9.

Использование в вашем конкретном случае: 

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('.topRow').scrollToFixed();
});
0 голосов
/ 10 июня 2011

Может быть, что-то вроде этого.В нем отсутствуют столбцы одинаковой высоты, но это можно сделать, хотя.

Fiddle

Просто попробуйте!- Не решает проблему с scroolbar.Количество голосов снизилось.

...