CSS: posisi tetap pada sumbu x tapi bukan y?

104

Apakah ada cara untuk menetapkan posisi hanya pada sumbu x? Jadi, ketika pengguna menggulir ke atas, tag div akan menggulir ke atas, tetapi tidak dari sisi ke sisi?

kylex.dll
sumber
3
Bolehkah, jika saya memberikan solusi JS untuk masalah ini?
Starx
1
Anda membutuhkan javascript untuk melakukan ini.
LostLin
@Starx - tidak hanya OK, ini juga diperlukan :-)
Pete Wilson
Saya baru-baru ini menjawab pertanyaan serupa yang mungkin lebih sesuai dengan apa yang Anda cari: stackoverflow.com/questions/8673560/…
Wex
Saya tahu pertanyaan yang cukup lama, tetapi apakah Anda masih mengalami masalah dengan pertanyaan ini?
Starx

Jawaban:

58

Ini adalah teknik sederhana menggunakan skrip juga. Anda juga dapat memeriksa demo di sini .

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

Kredit Pembaruan : @ PierredeLESPINAY

Seperti yang dikomentari, untuk membuat skrip mendukung perubahan di css tanpa harus mengkodekan ulang di skrip. Anda dapat menggunakan yang berikut ini.

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

Demo :)

Starx
sumber
@ PeteWilson, Ok periksa solusi ini
Starx
2
Apa pendapat Anda tentang mendapatkan leftnilai di awal fungsi seperti init_left = $('#header').position()['left']atau yang serupa?
Pierre de LESPINAY
@PierredeLESPINAY, Ya, poin yang sangat bagus. Itu akan membuatnya cukup fleksibel untuk mendukung perubahan.
Starx
2
Saya suka solusi ini, dan hanya menggunakannya sendiri. Satu masalah yang saya hadapi adalah bahwa penyegaran agak berombak ketika Anda melakukan pengguliran halus (misalnya: dengan menyeret bilah gulir). Sepertinya penyegaran javascript lebih lambat dari penyegaran css. Ada solusi untuk ini?
jsarma
17

Ini adalah utas lama tetapi CSS3 punya solusinya.

position: sticky;

Lihat postingan blog ini.

Demonstrasi:

animasi melekat posisi css

Dan dokumentasi ini.

frage
sumber
1
Menghabiskan waktu lama untuk menemukan solusi untuk ini, jawaban Anda sesuai dengan kebutuhan saya secara ideal.
Christopher Shaw
6
Ini bagus untuk benda vertikal, tetapi tidak berfungsi untuk pengguliran horizontal.
Cullub
10
Ini sama sekali tidak menjawab pertanyaan itu.
Alohci
12

Jika blok Anda awalnya diposisikan sebagai statis, Anda mungkin ingin mencobanya

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

Tidak, itu tidak mungkin dengan CSS murni. Pemosisian semacam itu memperbaiki elemen di viewport. Saya sarankan untuk memperbaiki elemen ke salah satu sisi viewport (yaitu atas, bawah, kiri atau kanan) sehingga tidak mengganggu konten lainnya.

Kambing Tidak Puas
sumber
7

Sekarang setelah seluler lebih dari 70% dari pasar internet, Anda dapat membuat sesuatu yang cerdas dan responsif untuk melakukan itu.

Anda dapat membuatnya dengan sangat mudah hanya dengan css, gunakan scroll overflow-x: untuk container dan scroll overflow-y: untuk container lain. Anda dapat dengan mudah memposisikan elemen kontainer dengan lebar: 100vw dan tinggi: 100vh.

Klik tengah pada contoh untuk mengujinya. Bekerja paling baik di seluler karena Anda tidak melihat bilah gulir.

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
sumber
Saya tidak suka scrollbar bawah hanya terlihat saat bergulir ke kaki ...
Fanky
Di browser seluler, ini tidak akan muncul. Di Chrome Anda dapat menyembunyikannya dengan CSS ini .yourclass::-webkit-scrollbar-track, .yourclass::-webkit-scrollbar-thumb {display:none;}. Di Firefox, Anda dapat menyembunyikannya dengan meletakkannya di luar overflow:hiddenwadah. Tapi itu pertanyaan lain yang pernah dijawab sebelumnya, saya yakin itu.
EPurpl3
2

Solusi Starx sangat membantu saya. Tetapi saya mengalami beberapa masalah ketika saya mencoba menerapkan sidebar scrolling vertikal dengannya. Ini kode awal saya, berdasarkan apa yang ditulis Starx:

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

Ini sedikit berbeda dari solusi Starx, karena menurut saya kodenya dirancang untuk memungkinkan menu mengambang secara horizontal, bukan vertikal. Tapi itu hanya sebuah tambahan. Masalah yang saya hadapi dengan kode di atas adalah bahwa di banyak browser, atau tergantung pada beban sumber daya komputer, gerakan menu akan berombak, sedangkan solusi css awal bagus dan mulus. Saya mengaitkan ini dengan browser yang lebih lambat dalam menjalankan peristiwa javascript daripada saat menerapkan css.

Solusi alternatif saya untuk masalah choppiness ini adalah mengatur frame menjadi tetap, bukan absolut, lalu membatalkan gerakan horizontal menggunakan metode starx.

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

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

Anda mungkin mengatakan semua yang saya lakukan adalah memperdagangkan choppiness scrolling vertikal untuk choppiness scrolling horizontal. Tapi masalahnya, 99% dari pengguliran adalah vertikal, dan itu jauh lebih menjengkelkan ketika itu berombak daripada ketika pengguliran horizontal.

Berikut posting saya yang terkait tentang masalah ini, jika saya belum menghabiskan kesabaran semua orang: Memperbaiki menu dalam satu arah di jquery

jsarma
sumber
2

Saya tersandung pada posting ini mencari cara yang bagus untuk menjaga header / bar navigasi saya tetap terpusat dan responsif terhadap perubahan ukuran.

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

Saat kami menggulir, bilah bergerak ke atas dari layar. Jika Anda menggulir ke kiri / kanan, itu akan tetap diperbaiki.

Zack Biernat
sumber
Terima kasih saudara. Ini berhasil. Sangat sederhana !! Genius you
Ram
0

Saya menyadari utas ini sangat tua tetapi ini membantu saya menemukan solusi untuk proyek saya.

Dalam kasus saya, saya memiliki header yang saya ingin tidak boleh kurang dari 1000px lebarnya, header selalu di atas, dengan konten yang tidak terbatas.

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

Ini juga harus ditangani saat browser Anda kurang dari lebar min header

Zholen
sumber
0

Saya baru saja menambahkan posisi: absolut dan itu menyelesaikan masalah saya.

Marié
sumber
8
Pemosisian absolut memperbaiki elemen relatif terhadap dokumen. Pemosisian tetap memperbaikinya relatif terhadap jendela. Jika menggunakan absolut memecahkan masalah Anda maka Anda tidak memiliki masalah yang sama seperti pertanyaan ini untuk memulai.
Niall
0

Ini adalah utas yang sangat lama, tetapi saya telah menemukan solusi CSS murni untuk ini menggunakan beberapa penyarangan kreatif. Saya sama sekali bukan penggemar metode jQuery ...

Biola di sini: 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;
}
differenceclouds
sumber
6
Solusi Anda memerlukan pengguliran div kontainer konten alih-alih jendela sebenarnya, yang jauh dari ideal - biola Anda menunjukkan alasannya. Konten Anda dijalankan di sisi kanan halaman, tetapi scrollbar horizontal tidak ada di layar. Itu masalah kegunaan yang besar.
Niall
0

Memperbarui skrip untuk memeriksa posisi awal:

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

}

Emmanuel
sumber
0

Pada div induk Anda dapat menambahkan

overflow-y: scroll; 
overflow-x: hidden;
Justyna
sumber
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
    });
});

Terima kasih

Sumit
sumber
0

Ya, Anda sebenarnya dapat melakukannya hanya dengan menggunakan CSS ...

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

Beri tahu saya jika berhasil

Tauras Burneika
sumber
-1

Solusi yang sangat mudah adalah:

window.onscroll = function (){
  document.getElementById('header').style.left= 15 - (document.documentElement.scrollLeft + document.body.scrollLeft)+"px";
}
Solusi mudah
sumber
Anda harus menggunakan CSS3 position:fixeduntuk ini daripada mencari solusi js
Muhammad Omer Aslam
-3

Kedengarannya seperti Anda perlu menggunakan posisi: tetap dan kemudian mengatur posisi atas menjadi persentase dan dan posisi kiri atau kanan ke unit tetap.

OD Ntuk
sumber