Расположите div, чтобы он был виден при прокрутке

#jquery #css

Вопрос:

Если у меня есть div со свойством overflow и широкая (со многими столбцами) таблица внутри этого div, как мне разместить другой элемент внутри первого контейнера, который останется видимым внутри div при прокрутке вправо / влево во время просмотра табличных данных?

 <div id="mainContainer" style="width:300px; overflow-x:auto">
    <div id="floatingContainer" style="border: 1px solid #ccc">Stay in the middle</div>
    <table>
    <tr>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
    </table>
</div>

Можно ли это сделать только с помощью CSS или мне нужно добавить немного jQuery? Я думаю, это что-то вроде position: fixed, за исключением того, что относится к div, в который я его помещаю…

Ответ №1:

Может быть, так?

http://jsfiddle.net/eeRMV/7/

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

Но кто-то 1 с большим опытом, вероятно, знает способ сделать это без добавления определенного значения высоты. для трех элементов (#MainContainer,#floatingContainer,таблица).

1. ваш фиксированный контент фиксирован относительно окна, а не относительно родительского элемента. Если кто-то прокручивает страницу горизонтально, это будет выглядеть очень странно.

2. Вы правы. Я забыл добавить «position: relative;» к родительскому элементу. Я думаю, что это должно сработать сейчас: jsfiddle.net/eeRMV/7

3. ps. Я также изменил ссылку в своем ответе на новую ссылку. Спасибо @ Olivieradam666!

4. На самом деле я не думаю, что вы можете объявить позицию: фиксированную относительно чего-то другого, кроме окна. В любом случае ваше исправление не работает, см. jsfiddle.net/eeRMV/13 (просто добавил ноль к вашему атрибуту высоты MainContainer)

5. Вы снова правы 🙂 Я думаю, это нельзя сделать, используя только css — по крайней мере, я не могу:/ Спасибо за ваши идеи! @op: используйте способ jquery, если никто другой не найдет способ только для css.

Ответ №2:

Поместите свою таблицу в div, для которого кто установил ширину и высоту и с помощью css-свойства overflow: auto. Это должно дать вам ожидаемый результат

 <div id="mainContainer" style="width:300px; overflow-x:auto">
<div id="floatingContainer" style="border: 1px solid #ccc">Stay in the middle</div>
<div style"height:100px;overflow: auto">   
  <table>
    <tr>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>
  </table>

РЕДАКТИРОВАТЬ: если вы хотите, чтобы полоса прокрутки отображалась на всем вашем контейнере, вы можете пойти по пути jQuery.

 var floatingContainer = $('#floatingContainer');
$('#mainContainer').scroll(function(event) {
    floatingContainer.css('margin-left', event.currentTarget.scrollLeft);
});

Вот демонстрация на jsFiddle.