Фиксация положения только по оси X в CSS

При разработке веб-макетов часто желательно, чтобы элементы фиксировались на определенной оси, а все еще разрешая прокрутку в других направлениях. Одним из распространенных сценариев является фиксация элемента на оси X, чтобы он оставался на месте горизонтально, пока пользователь прокручивает его вертикально.

Возможно ли это?

Да, зафиксировать положение по оси X можно только с помощью CSS.

Как добиться Это

Чтобы добиться этого, выполните следующие действия:

1. Установите положение элемента на «абсолютное»: это удалит элемент из нормального потока документа и позволяет точно его позиционировать.
2. Используйте свойство left: укажите левый край элемента относительно ближайшего позиционированного предка.
3. Используйте jQuery: используйте jQuery для реагирования на события прокрутки и соответствующим образом корректируйте положение элемента.

jQuery и Пример CSS:

$(window).scroll(function() {
    $('#header').css({
        'left': $(this).scrollLeft()   15 // Adjust based on CSS 'left'
    });
});

#header {
    top: 15px;
    left: 15px;
    position: absolute;
}

Расширенный скрипт:

Для поддержки динамических изменений CSS вы можете использовать этот обновленный скрипт:

var leftOffset = parseInt($('#header').css('left')); // Grab initial left position
$(window).scroll(function() {
    $('#header').css({
        'left': $(this).scrollLeft()   leftOffset // Use initial offset
    });
});

Следуя этим шагам, вы сможете эффективно зафиксировать положение элемента по оси X, сохраняя при этом возможность вертикальной прокрутки.