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

104

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

килекс
источник
3
Ничего страшного, если я дал JS-решение этой проблемы?
Starx
1
Для этого вам понадобится javascript.
LostLin
@Starx - это не только нормально, это необходимо :-)
Пит Уилсон
Недавно я ответил на аналогичный вопрос, который может быть больше похож на то, что вы ищете: stackoverflow.com/questions/8673560/…
Wex
Я знаю это довольно старый вопрос, но у вас все еще есть проблемы с этим вопросом?
Starx

Ответы:

58

Это простая техника, использующая также сценарий. Вы также можете посмотреть демо здесь .

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

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

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

Демо :)

Starx
источник
@PeteWilson, хорошо, проверь это решение
Starx
2
Что вы думаете о получении leftзначения в начале функции init_left = $('#header').position()['left']или чего-то подобного?
Pierre de LESPINAY
@PierredeLESPINAY, Да, очень хорошая мысль. Это сделало бы его достаточно гибким, чтобы поддерживать изменения.
Starx 01
2
Мне нравится это решение, и я просто использовал его сам. Одна проблема, с которой я столкнулся, заключается в том, что обновления происходят прерывисто, когда вы выполняете плавную прокрутку (например, при перетаскивании полосы прокрутки). Кажется, что обновление javascript происходит медленнее, чем обновление css. Любое решение для этого?
jsarma
17

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

position: sticky;

Взгляните на это сообщение в блоге.

Демонстрация:

CSS позиция залипающая анимация

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

ярость
источник
1
Потратив много времени на поиск решения этой проблемы, ваш ответ идеально соответствует моим потребностям.
Кристофер Шоу
6
Это хорошо для вертикальных изображений, но не работает для горизонтальной прокрутки.
Cullub 01
10
Это вообще не отвечает на вопрос.
Alohci
12

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

$(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>

ambienthack
источник
8

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

НедовольныйКозел
источник
7

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

Вы можете сделать это очень легко с помощью только css, используйте overflow-x: scroll для контейнера и overflow-y: scroll для другого контейнера. Вы можете легко разместить элементы контейнера с шириной: 100vw и высотой: 100vh.

Щелкните пример средней кнопкой мыши, чтобы проверить его. Лучше всего работает на мобильных устройствах, потому что вы не видите полос прокрутки.

body{max-width:100%}
*{box-sizing:border-box;}
.container{background:#ddd;overflow-y:scroll;width:500px;max-height:100vh;}
.header{background: pink;}
.body{background: teal;padding:20px;min-width: 100%;overflow:scroll;overflow-y:hidden;min-height:300px;}
.body >div{min-width:800px;}
<body>
  <div class="container">
    <div class="header">
       Button 1 > Button 2 > Button 3
    </div>
    <div class="body">
      <div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
     </div>
    </div>
  </div>
</body>

EPurpl3
источник
Мне не нравится, что нижняя полоса прокрутки видна только при прокрутке до стопы ...
Fanky
В мобильном браузере он не появится. В Chrome вы можете скрыть это с помощью этого CSS .yourclass::-webkit-scrollbar-track, .yourclass::-webkit-scrollbar-thumb {display:none;}. В Firefox вы можете скрыть его, поместив за пределы overflow:hiddenконтейнера. Но это еще один вопрос, на который уже был дан ответ, я уверен в этом.
EPurpl3
2

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

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

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

Мое альтернативное решение этой проблемы нестабильности - установить рамку на фиксированную, а не на абсолютную, а затем отменить горизонтальные движения с помощью метода 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

jsarma
источник
2

Я наткнулся на этот пост в поисках хорошего способа держать мой заголовок / панель навигации по центру и реагировать на изменения размера.

//CSS
.nav-container {
  height: 60px;  /*The static height*/
  width: 100%;  /*Makes it responsive to resizing the browser*/
  position: fixed;  /*So that it will always be in the center*/
}

//jQuery
$(window).scroll(() => {
  if ($(document).scrollTop() < 60) {
    $('.nav-container').css('top', $(document).scrollTop() * -1)
  }
})

По мере прокрутки полоса перемещается вверх от экрана. Если вы прокрутите влево / вправо, он останется неизменным.

Зак Бирнат
источник
Спасибо брат. Это сработало. Так просто !! Genius you
Ram
0

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

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

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

Жолень
источник
0

Я просто добавил position: absolute, и это решило мою проблему.

Мариэ
источник
8
Абсолютное позиционирование фиксирует элементы относительно документа. Фиксированное позиционирование фиксирует их относительно окна. Если использование absolute решило вашу проблему, тогда у вас не было той же проблемы, что и этот вопрос.
Niall
0

Это очень старый поток, но я нашел решение на чистом 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;
}
разницаоблака
источник
6
Однако ваше решение требует прокрутки div контейнера содержимого вместо фактического окна, что далеко от идеала - ваша скрипка демонстрирует, почему. Ваш контент уходит с правой стороны страницы, но горизонтальной полосы прокрутки нет на экране. Это большая проблема юзабилити.
Niall
0

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

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

}

Эммануэль
источник
0

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

overflow-y: scroll; 
overflow-x: hidden;
Юстына
источник
0
$(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
    });
});

Спасибо

Сумит
источник
0

Да, вы действительно можете сделать это только с помощью CSS ...

body { width:100%; margin-right: 0; margin-left:0; padding-right:0; padding-left:0; }

Скажите, работает ли

Таурас Бурнейка
источник
-1

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

window.onscroll = function (){
  document.getElementById('header').style.left= 15 - (document.documentElement.scrollLeft + document.body.scrollLeft)+"px";
}
Простое решение
источник
вам следует использовать position:fixedдля этого CSS3, а не использовать js-решение,
Мухаммад Омер Аслам,
-3

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

ОД Нтук
источник