CSS: фіксоване положення на осі x, але не у?


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

Демо :)


@PeteWilson, Добре перевірити це рішення
Starx

2
Що ви думаєте про отримання leftзначення на початку функції на кшталт init_left = $('#header').position()['left']або щось подібне?
П’єр де ЛЕСПІНАЙ

@PierredeLESPINAY, Так, дуже вдалий момент. Це зробило б його досить гнучким для підтримки змін.
Starx

2
Я люблю це рішення, і я просто його використовував. Одна з проблем, які я маю з цим, полягає в тому, що оновлення виглядають виразно, коли ви робите плавну прокрутку (наприклад: перетягуючи панель прокрутки). Здається, оновлення JavaScript проходить повільніше, ніж оновлення css. Будь-яке рішення для цього?
jsarma

17

Це стара нитка, але CSS3 має рішення.

position: sticky;

Погляньте на цю публікацію в блозі.

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

css позиція анімація

І ця документація.


1
Витратили віки, шукаючи рішення для цього, ваша відповідь ідеально відповідає моїм потребам.
Крістофер Шоу

6
Це добре для вертикальних речей, але не працює для горизонтальної прокрутки.
Cullub

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>


8

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


7

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

Ви можете створити це дуже просто за допомогою css, використовуйте overflow-x: прокрутка для контейнера та overflow-y: прокрутка для іншого контейнера. Ви можете легко розташувати елементи контейнера шириною: 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>


Мені не подобається, що нижня смуга прокрутки видно лише під час прокрутки до стопи ...
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.

Моє альтернативне рішення цієї проблеми щастя - встановити фіксований кадр замість абсолютного, а потім скасувати горизонтальні рухи методом Старкса.

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

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

Ви можете сказати, що все, що я роблю, - це торгувати вертикальністю прокрутки, щоб провести горизонтальну прокрутку. Але справа в тому, що 99% прокрутки є вертикальними, і це набагато більше дратує, коли це хитливо, ніж коли горизонтальне прокручування.

Ось моя відповідна публікація з цього приводу, якщо я ще не вичерпав терпіння всіх: Виправлення меню в одному напрямку в jquery


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

Коли ми прокручуємо, смужка рухається вгору від екрана. Якщо прокрутити ліворуч / праворуч, воно залишатиметься нерухомим.


Дякую, брате. Це спрацювало. Так просто, хоча !! Геніальний ти
Рам

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

Я просто додав позицію: абсолютна і це вирішило мою проблему.


8
Абсолютне позиціонування фіксує елементи відносно документа. Фіксоване позиціонування фіксує їх відносно вікна. Якщо використання абсолютного рішення вирішило вашу проблему, тоді у вас не було тієї самої проблеми, як це питання.
Найлл

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
У вашому рішенні потрібно прокрутити дію контейнера вмісту, а не власне вікно, що далеко не ідеально - ваша скрипка демонструє, чому. Ваш вміст працює з правого боку сторінки, але горизонтальна смуга прокрутки відсутня на екрані. Це велике питання юзабіліті.
Найлл

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

На батьківському діві ви можете додати

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";
}

ви повинні використовувати CSS3 position:fixedдля цього, а не шукати рішення для js
Мухаммед Омер Аслам

-3

Здається, що потрібно використовувати позицію: фіксовану, а потім встановити верхню позицію у відсотках, а ліву чи праву позицію - фіксовану одиницю.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.