CSS: фиксированное положение по оси x, но не y?

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

Ответ 1

Его простой метод с использованием script. Вы также можете проверить демо здесь.

JQuery

$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + 15 
         //Why this 15, because in the CSS, we have set left 15, so as we scroll, we would want this to remain at 15px left
    });
});

CSS

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

Обновить Кредит: @PierredeLESPINAY

Как прокомментировано, чтобы сделать script поддержку изменений в css без необходимости их перекодирования в script. Вы можете использовать следующее.

var leftOffset = parseInt($("#header").css('left')); //Grab the left position left first
$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + leftOffset //Use it later
    });
});

Демо:)

Ответ 2

Нет, это невозможно с чистым CSS. Такое позиционирование фиксирует элемент в окне просмотра. Я бы предложил просто зафиксировать элемент на одной из сторон окна просмотра (то есть сверху, снизу, слева или справа), чтобы он не мешал другому контенту.

Ответ 3

Если ваш блок изначально позиционируется как статический, вы можете попробовать это

$(window).on('scroll', function () {

  var $w = $(window);
  $('.position-fixed-x').css('left', $w.scrollLeft());
  $('.position-fixed-y').css('top', $w.scrollTop());

});

.container {
  width: 1000px;
}

.position-fixed-x {
  position: relative; 
}

.position-fixed-y {
  position: relative;
}

.blue-box {
  background:blue;
  width: 50px;
  height: 50px;
}

.red-box {
  background: red;
  width: 50px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

<div class="position-fixed-y red-box">
  
</div>

The pattern of base pairs in the DNA double helix encodes the instructions for building the proteins necessary to construct an entire organism. DNA, or deoxyribonucleic acid, is found within most cells of an organism, and most organisms have their own unique DNA code. One exception to this is cloned organisms, which have the same exact DNA code as their parents do.

<div class="position-fixed-x blue-box">
  
</div>

DNA strands are composed of millions of sub-units, called nucleotides. Each nucleotide contains a 5-carbon sugar, a phosphate group and a nitrogen base. There are four different variations of the nitrogen base group, responsible for all of the variation between two different DNA strands. The four different variations are called adenine, guanine, cytosine and thymine, but they are typically abbreviated and only referred to by their first letter. The sequence of these different nitrogen bases makes up the code of the DNA.

The DNA strand splits in two, and forms two different DNA strands during cell replication. However, sometimes this process is not perfect, and mistakes occur. These mistakes may change the way an organism is constructed or functions. When this happens, it is called a mutation. These mutations can be helpful or harmful, and they are usually passed on to the organism’s offspring.
  
 The traits of a living thing depend on the complex mixture of interacting components inside it. Proteins do much of the chemical work inside cells, so they largely determine what those traits are. But those proteins owe their existence to the DNA (deoxyribonucleic acid), so that is where we must look for the answer.
The easiest way to understand how DNA is organized is to start with its basic building blocks. DNA consists of four different sugars that interact with each other in specific ways. These four sugars are called nucleotide bases and have the names adenine (A), thymine (T), cytosine (C) and guanine (G). Think of these four bases as letters in an alphabet, the alphabet of life!
If we hook up these nucleotides into a sequence--for example, GATCATCCG--we now have a little piece of DNA, or a very short word. A much longer piece of DNA can therefore be the equivalent of different words connected to make a sentence, or gene, that describes how to build a protein. And a still longer piece of DNA could contain information about when that protein should be made. All the DNA in a cell gives us enough words and sentences to serve as a master description or blueprint for a human (or an animal, a plant, or a microorganism).
Of course, the details are a little more complicated than that! In practice, active stretches of DNA must be copied as a similar message molecule called RNA. The words in the RNA then need to be "read" to produce the proteins, which are themselves stretches of words made up of a different alphabet, the amino acid alphabet. Nobel laureates Linus Pauling, who discerned the structure of proteins, and James Watson and Francis Crick, who later deciphered the helical structure of DNA, helped us to understand this "Central Dogma" of heredity--that the DNA code turns into an RNA message that has the ability to organize 20 amino acids into a complex protein: DNA -> RNA -> Protein.
To understand how this all comes together, consider the trait for blue eyes. DNA for a blue-eyes gene is copied as a blue-eyes RNA message. That message is then translated into the blue protein pigments found in the cells of the eye. For every trait we have--eye color, skin color and so on--there is a gene or group of genes that controls the trait by producing first the message and then the protein. Sperm cells and eggs cells are specialized to carry DNA in such a way that, at fertilization, a new individual with traits from both its mother and father is created.
</div>

Ответ 4

Это старый поток, но у CSS3 есть решение.

position: sticky;

Получите добычу в этом сообщении в блоге.

И эта документация.

Ответ 5

Решение Starx было очень полезно для меня. Но у меня были некоторые проблемы, когда я пытался использовать вертикальную панель прокрутки с ней. Вот мой первоначальный код, основанный на том, что Starx написал:

function fix_vertical_scroll(id) {
    $(window).scroll(function(){
        $(id).css({
            'top': $(this).scrollTop() //Use it later
        });
    });
}

Он немного отличается от решения Starx, потому что я думаю, что его код предназначен для того, чтобы меню плавало горизонтально, а не вертикально. Но это просто в стороне. Проблема, с которой я столкнулась с указанным выше кодом, заключается в том, что во многих браузерах или в зависимости от нагрузки на ресурс компьютера движения меню будут прерывистыми, тогда как исходное решение css было приятным и плавным. Я связываю это с тем, что браузеры медленнее запускают javascript-события, чем при реализации css.

Мое альтернативное решение этой проблемы choppiness задает рамку как фиксированную, а не абсолютную, а затем отменяет горизонтальные движения, используя метод starx.

function float_horizontal_scroll(id) {
    jQuery(window).scroll(function(){
        jQuery(id).css({
            'left': 0 - jQuery(this).scrollLeft()
        });
    });
}

#leftframe {
 position:fixed;
 width: 200;
}

Вы можете сказать, что все, что я делаю, - это торговля вертикальной прокручивающейся изменчивостью для горизонтальной прокрутки. Но дело в том, что 99% прокрутки является вертикальным, и это гораздо более раздражает, когда это изменчиво, чем при горизонтальной прокрутке.

Здесь мой родственный пост по этому вопросу, если я еще не исчерпал каждого терпения: Фиксация меню в одном направлении в jquery

Ответ 6

Это очень старый поток, но я нашел для него чистое решение 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;
}

Ответ 7

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

В моем случае у меня был заголовок, который я хотел бы никогда не быть шириной в 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', '');
        }
    });

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

Ответ 8

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

Ответ 9

Обновлен script, чтобы проверить начальную позицию:

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' });
});

}

Ответ 10

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

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

Ответ 11

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

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

Ответ 12

$(window).scroll(function(){
    $('#header').css({
        'left': $(this).scrollLeft() + 15 
         //Why this 15, because in the CSS, we have set left 15, so as we scroll, we would want this to remain at 15px left
    });
});

Спасибо

Ответ 13

Очень простое решение:

window.onscroll = function (){
  document.getElementById('header').style.left= 15 - (document.documentElement.scrollLeft + document.body.scrollLeft)+"px";
}

Ответ 14

Похоже, вам нужно использовать положение: фиксированное, а затем установить верхнее положение на процент, а также левое или правое положение на фиксированный блок.