CSS: фиксированная позиция по оси х, но не у?

Question

Есть ли способ зафиксировать положение только на оси х? Поэтому, когда пользователь прокручивает вверх, тег div будет прокручиваться вместе с ним, но не из стороны в сторону?

Answer 1

На родительском div вы можете добавить

overflow-y: scroll; 
overflow-x: hidden;

Answer 2

Обновлен скрипт для проверки стартовой позиции:

function float_horizontal_scroll(id) {
var el = jQuery(id);
var isLeft = el.css('left') !== 'auto';
var start =((isLeft ? el.css('left') : el.css('right')).replace("px", ""));
jQuery(window).scroll(function () {
    var leftScroll = jQuery(this).scrollLeft();
    if (isLeft)
        el.css({ 'left': (start + leftScroll) + 'px' });
    else
        el.css({ 'right': (start - leftScroll) + 'px' });
});

}

Answer 3

Это очень старая тема, но я нашел чистое CSS-решение для этого, используя некоторые творческие вложения. Я вообще не был поклонником метода jQuery ...

Скрипка здесь: https://jsfiddle.net/4jeuv5jq/

<div id="wrapper">
    <div id="fixeditem">
        Haha, I am a header. Nah.. Nah na na na
    </div>
    <div id="contentwrapper">
        <div id="content">
            Lorem ipsum.....
        </div>
    </div>
</div>

#wrapper {
position: relative;
width: 100%;
overflow: scroll;
}

#fixeditem {
position: absolute;
}

#contentwrapper {
width: 100%;
overflow: scroll;
}

#content {
width: 1000px;
height: 2000px;
}

Answer 4

Я только добавил позицию: абсолют, и это решило мою проблему.

Answer 5

Я понимаю, что эта тема очень старая, но она помогла мне найти решение для моего проекта.

В моем случае у меня был заголовок, ширина которого не должна превышать 1000 пикселей, заголовок всегда сверху, с контентом, который может быть неограниченным.

header{position:fixed; min-width:1024px;}
<header data-min-width="1024"></header>

    $(window).on('scroll resize', function () {
        var header = $('header');
        if ($(this).width() < header.data('min-width')) {
            header.css('left', -$(this).scrollLeft());
        } else {
            header.css('left', '');
        }
    });

Это также должно обрабатываться, когда ваш браузер меньше минимальной ширины заголовков

Answer 6

Если вы хотите исправить это справа, например, используйте justify-content: flex-end.

Подробнее: http://www.w3schools.com/cssref/css3_pr_justify-content.asp

Answer 7

Звучит так, как будто вам нужно использовать position: fixed, а затем установить верхнюю позицию в процентах, а в левой или правой позиции - фиксированную единицу.