Блог

Главная - Вопросы по программированию - Закрепление элемента на вершине

Закрепление элемента на вершине

#html #css

#HTML #css

Вопрос:

У меня есть элемент, прикрепленный к верхней оси x, y. Есть ли какой-либо способ изменить его, чтобы он был привязан только к оси x? Например. — чтобы я мог прокручивать фиксированный элемент влево и вправо.

Текущий код:

 <div style="position:fixed;top:0;width:2000px;">
The fixed header element
</div>
<div style="overflow:auto;width:2000px;">
the scrollable content element
</div>

Комментарии:

1. Я предполагаю, что вам нужен overflow-x or overflow-y . Ваш вопрос не очень ясен.

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

3. Я не думаю, что чистый CSS может это сделать, javascript — это решение для удовлетворения ваших потребностей.

4. Тогда — как я могу сделать это с помощью JS? Есть предложения?

5. попробуйте с position:absolute;top:0px;float:left;

Ответ №1:

Это потрясающий вопрос, и в CSS3 нет ответа для вас. Невозможно зафиксировать элемент на одной оси, но не на другой.

Идеальным решением, imo, является предоставление атрибутов CSS3, таких как, скажем, position:fixed-x и position:fixed-y. Но такой вещи не существует.

Единственный известный мне способ добиться такого очень полезного поведения — написать функцию JavaScript для обработки события setInterval( ); опрашивать текущую позицию прокрутки по X или Y при каждом событии; и, если положение прокрутки на оси, которую вы хотите исправить, изменилось, затем измените положение прокрутки фиксированного элемента, чтобы компенсировать, т. Е. переместить его обратно туда, где ему место.

Я на самом деле использую этот метод, и он работает, но это мучительно. Мой код опрашивает позиции прокрутки X и Y каждую десятую долю секунды, чего часто бывает достаточно, чтобы не выглядеть слишком отрывисто.

Вы можете увидеть решение в действии в этой длинной таблице. Сузьте окно, чтобы появилась горизонтальная полоса прокрутки, прокручивающая таблицу влево и вправо. Заголовки столбцов перемещаются вместе с таблицей, но вы можете прокручивать тело таблицы по вертикали, а заголовки столбцов оставаться на месте.