"Posisi: lengket;" tidak Bekerja CSS dan HTML


177

Saya ingin membuat Bilah Navigasi tetap di atas setelah saya gulir ke sana, tetapi tidak berfungsi dan saya tidak tahu mengapa. Jika Anda dapat membantu, ini kode HTML dan CSS saya:

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato",sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover{
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}
<nav style="position: sticky; position: -webkit-sticky;">
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>


10
posisi: sticky membutuhkan koordinat untuk tel di mana menempel
G-Cyrillus

36
Anda juga harus berhati-hati dengan elemen induk. position: stickydapat berhenti bekerja jika ada di dalam kotak centang kecuali Anda hati-hati dan juga akan gagal jika ada overflow: hiddenatau di overflow: autoantara itu dan apa pun yang bergulir di dalamnya (root tubuh atau leluhur terdekat dengan overflow: gulir)
user56reinstatemonica8

2
@ user56reinstatemonica8 OMG terima kasih banyak untuk memberitahu saya tentang overflow: hiddendan overflow: auto! Aku sudah menggaruk-garuk kepalaku selama berhari-hari mencoba menyelesaikan masalah ini
Oneezy

Jawaban:


206

Sticky positioning adalah hibrida dari positioning relatif dan tetap. Elemen diperlakukan sebagai posisi relatif sampai melintasi ambang yang ditentukan, pada titik mana diperlakukan sebagai posisi tetap.
...
Anda harus menentukan ambang dengan setidaknya satu dari top, right, bottom, atau leftuntuk penentuan posisi lengket untuk berperilaku seperti yang diharapkan. Kalau tidak, itu tidak akan bisa dibedakan dari posisi relatif. [ sumber: MDN ]

Jadi, dalam contoh Anda, Anda harus menentukan posisi di mana ia harus tetap pada akhirnya dengan menggunakan topproperti.

html, body {
  height: 200%;
}

nav {
  position: sticky;
  position: -webkit-sticky;
  top: 0; /* required */
}

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato", sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover {
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}
<nav>
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>


124
Secara umum, jawaban ini tidak cukup untuk lengket untuk bekerja, orang tua juga seharusnya tidak memiliki properti melimpah.
ViliusL

Terima kasih atas komentarmu. Saya setuju dengan Anda bahwa untuk contoh selain OP, jawaban saya mungkin tidak cukup. Jawaban lain menunjukkan ini :)
Marvin

Saya pikir masalahnya adalah bahwa posisi lengket hanya dapat diterapkan pada anak-anak yang dimiliki oleh orang tua yang dapat digulir dengan ketinggian yang diketahui, (anak-anak langsung dalam kotak pos memiliki tinggi badan yang dihitung dari item-fleksibel lainnya)
code4j

@ViliusL terima kasih atas komentar Anda! Itulah masalah yang saya miliki dengan posisi: lengket, saya tidak akan tahu bahwa jika bukan untuk Anda karena saya tidak menemukan informasi ini di mana pun.
Piotr Szlagura

sticky position seharusnya tidak memiliki induk dengan properti overflow, juga sticky tidak didukung di beberapa browser web
Rohan Shenoy

331

Periksa apakah elemen leluhur memiliki set overflow (misalnya overflow:hidden); coba matikan. Anda mungkin harus naik pohon DOM lebih tinggi dari yang Anda harapkan =).

Ini dapat memengaruhi position:stickyelemen turunan Anda.


36
Seandainya saya bisa membesarkan Anda beberapa kali! Ini telah menggigit saya lebih sering daripada yang saya akui.
Alexander Varwijk

2
Ini adalah jawaban yang benar. Namun, bisa sulit untuk menemukan elemen induk mana yang menyebabkan masalah. Saya menulis skrip jquery untuk membantu mengidentifikasi properti overflow pada orang tua yang mengidentifikasi masalah (jalankan saja di konsol Anda). Karena skripnya adalah beberapa baris saya telah menambahkan jawaban yang berisi skrip di bawah ini.
danday74

5
Saya melewatkan "s" di "elemen induk" Anda
che-azeh

5
Saya juga merindukan "s" :( dan itulah masalahnya. Di banyak tempat orang menulis bahwa Anda harus memeriksa hanya orang tua tidak semua orang tua. Saya menemukan masalah saya dengan memeriksa apakah memanggil $(stickyElement).parents().css("overflow", "visible")konsol web akan membantu dan ternyata berhasil. Kemudian saya menemukan orang tua yang jauh dengan overflow:hiddengaya yang menyebabkan masalah. Saya berharap saya membaca jawaban ini dengan lebih hati-hati
Mariusz Pawelski

2
Jika Anda perlu memeriksa overflow:hidden, Anda dapat menjalankan skrip ini di konsol browser Anda untuk memeriksa semua orang tua / leluhur dari elemen yang diberikan: gist.github.com/brandonjp/478cf6e32d90ab9cb2cd8cbb0799c7a7
brandonjp

100

Saya memiliki masalah yang sama, dan saya menemukan jawabannya di sini .

Jika elemen Anda tidak lengket seperti yang diharapkan, hal pertama yang harus diperiksa adalah aturan yang diterapkan pada wadah.

Secara khusus, cari properti overflow yang ditetapkan pada induk. Anda tidak dapat menggunakan : overflow: hidden, overflow: scrollatau overflow: autopada orang tua dari position: stickyelemen.


Ini juga jawaban yang tepat tetapi juga melihat jawaban saya yang membantu dengan mudah mengidentifikasi orang tua yang menyebabkan masalah.
danday74

10
Anda harus memeriksa tidak hanya wadah induk terdekat tapi semua orang tua elemen s .
Mariusz Pawelski

ya, lihat jawaban saya untuk melakukan hal itu dan periksa SEMUA orang tua dengan sangat cepat
danday74

1
Tautan itu membantu saya juga. Masalah saya terpecahkan oleh "... Jika Anda tidak menggunakan overflow dan masih mengalami masalah, ada baiknya memeriksa apakah ketinggian ditetapkan pada induk ..."
xenetics

Penghemat hidup, deskripsi yang sangat sederhana untuk masalah ini, tetapi apakah ada pekerjaan untuk ini yang hanya ingin tahu
Rahul Singh

32

Beberapa hal lagi yang saya temui:

Ketika elemen lengket Anda adalah komponen (sudut dll)

  • Jika elemen 'sticky' itu sendiri adalah komponen dengan pemilih elemen kustom, seperti komponen sudut bernama <app-menu-bar>Anda perlu menambahkan berikut ini ke css komponen:

    :host { display: block; }   

    atau

    app-menu-bar  { display: block; }   // (in the containing component's css)

    Safari di iOS khususnya tampaknya memerlukan display:blockbahkan pada elemen root app-rootaplikasi sudut atau itu tidak akan menempel.

  • Jika Anda membuat komponen dan mendefinisikan css di dalam komponen (bayangan DOM / gaya enkapsulasi), pastikan position: stickysedang diterapkan ke pemilih 'luar' (mis. app-menu-barDi devtools harus menunjukkan posisi lengket) dan bukan tingkat atas div dalam komponen. Dengan Angular, ini dapat dicapai dengan :hostpemilih di css untuk komponen Anda.

    :host
    {
        position: sticky;
        display: block;   // this is the same as shown above
        top: 0;
        background: red;    
    }

Lain

  • Jika elemen yang mengikuti elemen lengket Anda memiliki latar belakang yang solid, Anda harus menambahkan yang berikut untuk menghentikannya agar tidak tergelincir di bawahnya:

    .sticky-element { z-index: 100; }
    .parent-of-sticky-element { position: relative; }
  • Elemen lengket Anda harus menjadi yang pertama (sebelum konten Anda) jika menggunakan topdan setelah itu jika menggunakan bottom.

  • Ada komplikasi saat menggunakan overflow: hiddenelemen pembungkus Anda - secara umum itu akan membunuh elemen lengket di dalamnya. Lebih baik dijelaskan dalam pertanyaan ini

  • Peramban seluler dapat menonaktifkan item yang diposisikan tetap / tetap ketika keyboard pada layar terlihat. Saya tidak yakin dengan aturan yang pasti (apakah ada yang pernah tahu) tetapi ketika keyboard terlihat Anda sedang melihat semacam 'jendela' ke jendela dan Anda tidak akan dapat dengan mudah mendapatkan hal-hal yang melekat pada bagian atas layar yang terlihat.

  • Pastikan Anda memiliki:

    position: sticky;

    dan tidak

    display: sticky;

Masalah kegunaan yang salah

  • Berhati-hatilah jika desain Anda meminta untuk menempelkan benda di bagian bawah layar pada perangkat seluler. Pada iPhone X misalnya mereka menampilkan garis sempit untuk menunjukkan wilayah gesek (untuk kembali ke beranda) - dan elemen di dalam wilayah ini tidak dapat diklik. Jadi, jika Anda menempelkan sesuatu, pastikan untuk menguji pada iPhone X bahwa pengguna dapat mengaktifkannya. Tombol 'Beli Sekarang' yang besar tidak baik jika orang tidak bisa mengkliknya!
  • Jika Anda beriklan di Facebook halaman web ditampilkan dalam kontrol 'tampilan web' dalam aplikasi seluler Facebook. Terutama ketika menampilkan video (di mana konten Anda dimulai di bagian bawah layar saja) - mereka sering benar-benar mengacaukan elemen lengket dengan menempatkan halaman Anda di dalam viewport yang dapat digulir yang sebenarnya memungkinkan elemen lengket Anda menghilang dari bagian atas halaman. Pastikan untuk menguji dalam konteks iklan yang sebenarnya dan tidak hanya di browser ponsel atau bahkan browser Facebook yang semuanya dapat berperilaku berbeda.

@Sergey Saya tidak terlalu jelas tentang yang mana display: blockdan position: relativememicu perilaku yang benar di Safari - apakah itu hanya display: blockdiperlukan? Tentu saja mungkin tidak ada salahnya menentukan keduanya
Simon_Weaver

2
Hanya display: blockcukup
Sergey

27

Ini adalah kelanjutan dari jawaban dari MarsAndBack dan Miftah Mizwar.

Jawaban mereka benar. Namun, sulit untuk mengidentifikasi masalah leluhur.

Untuk membuatnya sangat sederhana, jalankan skrip jQuery ini di konsol browser Anda dan itu akan memberi tahu Anda nilai properti overflow pada setiap leluhur.

$('.your-sticky-element').parents().filter(function() {
    console.log($(this));
    console.log($(this).css('overflow'));
    return $(this).css('overflow') === 'hidden';
});

Di mana leluhur tidak perlu overflow: visiblemengubah CSS-nya sehingga membuatnya!

Juga, seperti yang dinyatakan di tempat lain, pastikan elemen lengket Anda memiliki ini di CSS:

.your-sticky-element {
    position: sticky;
    top: 0;
}

2
Itu sangat membantu. Saya dapat dengan cepat mengidentifikasi elemen induk yang memiliki nilai overflow: invisible.
David Brower

4
Jika Anda tidak memiliki jQuery di laman Anda, Anda dapat menjalankan cuplikan kecil ini di konsol untuk menambahkannya: (async function() { let response = await fetch('https://code.jquery.com/jquery-3.3.1.min.js'); let script = await response.text(); eval(script); })();
magikMaker

8
Anda juga dapat menjalankan potongan ini yang tidak memerlukan JQuery untuk menemukan non "terlihat" overflow orangtua: var p = $0.parentElement; while(p != null) { var ov = getComputedStyle(p).overflow; if(ov !== 'visible') console.warn(ov, p); else console.log(ov, p); p = p.parentElement; }Dimana $0adalah elemen terakhir yang dipilih dalam alat pengembang.
Mariusz Pawelski

Orang juga bisa menangani position: fixeddan menyesuaikan properti dengan JavaScript. Pertanyaan tidak menyatakan perlunya JavaScript.
vintproykt

12

Saya harus menggunakan CSS berikut untuk membuatnya berfungsi:

.parent {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    overflow: visible;
}

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

Jika dosen di atas tidak bekerja maka ...

Telusuri semua leluhur dan pastikan tidak ada unsur-unsur ini yang memiliki overflow: hidden. Anda harus mengubahnya keoverflow: visible


1
tampilan: flex membuat hal
MaciejLisCK

6

Jika Anda menemukan ini dan lengket Anda tidak berfungsi - coba setel induk ke:

display: unset

Bekerja untukku


Ini adalah salah satunya.
mm-93

Oh! Ini tampaknya merupakan penyelesaian untuk kasus bahwa elemen induk memiliki ketinggian terbatas (mis. Wadah navbar atau sesuatu, yang bertentangan dengan seluruh tubuh atau wadah halaman) - sepertinya perekat tidak suka menggulir ke luar orang tua (yang benar-benar konyol!) Sekarang semua orang hanya perlu seberuntung itu untuk dapat mengatur orang tua display: unset, yang mungkin tidak selalu dapat segera hidup
Ben Philipp

Juga tampaknya bekerja dengan contents, initial(?) Daninline
Ben Philipp

5

Momen lucu yang tidak jelas bagi saya: setidaknya di Chrome 70 position: stickytidak berlaku jika Anda menyetelnya menggunakan DevTools.


Apakah Anda memiliki sumber untuk ini, atau informasi lain tentang cara mengatasi ini?
AJMansfield

5

Sepertinya navbar yang akan ditempel tidak boleh berada di dalam div atau bagian dengan konten lain. Tidak ada solusi yang bekerja untuk saya sampai saya mengambil navbar dari div yang berbagi navbar dengan topbar lain. Saya sebelumnya memiliki topbar dan navbar dibungkus dengan div umum.


Terima kasih, ini yang saya cari! Bagi saya tidak ada orang tua dengan luapan, juga tidak ada masalah ketinggian. Akan menyenangkan melihat info ini di jawaban yang diterima juga.
saglamcem

Saya baru saja mengetahui melalui percobaan bahwa lengket tidak akan menggulir di luar elemen induknya. Tidak masalah berapa banyak saudara lain yang dimilikinya, tetapi induknya tidak dapat, tampaknya, menjadi wadah navbar tetapi harus menjadi sesuatu pada level halaman wadah konten / :( Ini konyol
Ben Philipp

Tapi lihat! Jika Anda bisa, jika Anda mengatur orang tua pembatas display: unset, pembatasan ini diangkat! lihat stackoverflow.com/a/60560997/2902367 Tampaknya juga berfungsi dengan contents, initial(?) daninline
Ben Philipp

4

dari komentar saya:

position:sticky membutuhkan koordinat untuk tel di mana harus tetap

nav {
  position: sticky;
  top: 0;
}

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato", sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover {
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

body {
  height: 200vh;
}
<nav>
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>

Ada polyfill untuk digunakan untuk browser lain selain FF dan Chrome. Ini adalah aturan eksperimental yang dapat diimplementasikan atau tidak kapan saja melalui browser. Chrome menambahkannya beberapa tahun yang lalu dan kemudian menjatuhkannya, sepertinya kembali ... tapi untuk berapa lama?

Posisi terdekat adalah posisi: relatif + koordinat yang diperbarui saat menggulir setelah mencapai titik lengket, jika Anda ingin mengubahnya menjadi skrip javascript


4

Saya tahu ini sepertinya sudah dijawab, tetapi saya menemukan kasus tertentu, dan saya merasa sebagian besar jawaban tidak tepat.

The overflow:hiddenjawaban mencakup 90% dari kasus. Itu kurang lebih skenario "lengket nav".

Tapi perilaku lengket paling baik digunakan di ketinggian wadah. Pikirkan formulir buletin di kolom kanan situs web Anda yang bergulir ke bawah dengan halaman. Jika elemen lengket Anda adalah satu-satunya anak dari wadah, wadah adalah ukuran yang sama persis, dan tidak ada ruang untuk menggulir.

Wadah Anda harus setinggi yang Anda harapkan dapat digulirkan oleh elemen Anda. Yang dalam skenario "kolom kanan" saya adalah ketinggian kolom kiri. Cara terbaik untuk mencapai ini adalah dengan menggunakan display:table-cellkolom. Jika Anda tidak bisa, dan terjebak dengan float:rightdan seperti saya, Anda harus menebak ketinggian kolom kiri untuk menghitungnya dengan Javascript.


2
"Jika elemen lengketmu adalah satu-satunya anak dari wadah itu, wadah itu berukuran sama persis, dan tidak ada ruang untuk menggulir." EMAS!!! Terima kasih!
Mark Jackson

Iya! Butuh waktu beberapa saat untuk memikirkan hal ini. Awalnya saya menganggapnya sebagai pembatasan yang konyol, tetapi saya kira setidaknya harus ada pilihan untuk itu. Saya lebih suka sesuatu seperti sticky-limit: parent, sticky-limit: bodyatau sticky-limit: nth-parent(3)... Pokoknya: Jika Anda bisa, Anda dapat mengangkat batasan ini dengan mengatur induk pembatas display: unset, seperti yang tercantum di stackoverflow.com/a/60560997/2902367 . Tampaknya juga bekerja dengan contents, initial(?) Daninline
Ben Philipp

3

Saya tahu ini adalah pos lama. Tetapi jika ada seseorang seperti saya yang baru saja mulai bermain-main dengan posisi: lengket ini bisa berguna.

Dalam kasus saya, saya menggunakan posisi: sticky sebagai item grid. Itu tidak berfungsi dan masalahnya adalah overflow-x: disembunyikan pada htmlelemen. Segera setelah saya menghapus properti itu berfungsi dengan baik. Memiliki overflow-x: disembunyikan pada bodyelemen tampaknya bekerja dengan baik, tidak tahu mengapa


1

dua jawaban di sini:

  1. hapus overflowproperti dari bodytag

  2. diatur height: 100%ke bodyuntuk memperbaiki masalah denganoverflow-y: auto

min-height: 100% tidak bekerja, bukan height: 100%


1

Saya percaya artikel ini mengatakan banyak tentang cara stickykerjanya

Bagaimana Posisi CSS Lengket Benar-Benar Bekerja! Posisi CSS sticky memiliki dua bagian utama, item lengket & wadah lengket .

Sticky Item  - adalah elemen yang kami definisikan dengan posisi: sticky styles. Elemen akan mengambang ketika posisi viewport cocok dengan definisi posisi, misalnya:top: 0px .

Sticky Container —adalah elemen HTML yang membungkus item sticky.Ini adalah area maksimum tempat benda lengket itu bisa mengapung.

Ketika Anda mendefinisikan elemen dengan posisi: sticky Anda secara otomatis mendefinisikan elemen induk sebagai wadah sticky!


1

Perilaku nyata dari elemen lengket adalah:

  • Pertama itu relatif untuk sementara waktu
  • kemudian diperbaiki untuk sementara waktu
  • akhirnya, menghilang dari pandangan

Elemen yang diposisikan dengan lengket diperlakukan sebagai posisi yang relatif sampai blok yang mengandung melintasi ambang yang ditentukan (seperti pengaturan atas ke nilai selain otomatis) dalam akar alirannya (atau wadah yang digulirkan di dalamnya), di mana titik itu diperlakukan sebagai "macet" "Sampai bertemu ujung berlawanan dari blok yang mengandungnya.

Elemen diposisikan sesuai dengan aliran normal dokumen, dan kemudian diimbangi relatif terhadap leluhur gulir terdekat dan berisi blok (leluhur tingkat blok terdekat), termasuk elemen terkait tabel, berdasarkan nilai atas, kanan, bawah, dan pergi. Offset tidak mempengaruhi posisi elemen lainnya.

Nilai ini selalu menciptakan konteks susun baru. Perhatikan bahwa elemen lengket "menempel" ke leluhur terdekatnya yang memiliki "mekanisme gulir" (dibuat ketika limpahan disembunyikan, gulir, otomatis, atau overlay), bahkan jika leluhur itu bukan leluhur terdekat yang benar-benar menggulir.

Contoh ini akan membantu Anda memahami:

code https://codepen.io/darylljann/pen/PpjwPM


0

jika perbaikan danday74 tidak berfungsi, periksa apakah elemen induk memiliki ketinggian.

Dalam kasus saya, saya memiliki dua anak, satu mengambang ke kiri dan satu lagi mengambang kanan. Saya ingin yang mengapung yang tepat menjadi lengket tetapi harus menambahkan <div style="clear: both;"></div>di ujung induk, untuk memberikan ketinggian.


Tidak yakin mengapa ini diturunkan oleh seseorang, tapi ini persis kasus saya: Saya menambahkan float:leftke elemen induk (tanpa mengapung tingginya adalah 0) dan position:stickyberhasil.
aexl

0

Saya menggunakan solusi JS. Ini bekerja di Firefox dan Chrome. Ada masalah, beri tahu saya.

html

<body>
  <header id="header">
    <h1>Extra-Long Page Heading That Wraps</h1>
    <nav id="nav">
      <ul>
        <li><a href="" title="">Home</a></li>
        <li><a href="" title="">Page 2</a></li>
        <li><a href="" title="">Page 3</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <p><!-- ridiculously long content --></p>
  </main>
  <footer>
    <p>FOOTER CONTENT</p>
  </footer>
  <script src="navbar.js" type="text/javascript"></script>
</body>

css

nav a {
    background: #aaa;
    font-size: 1.2rem;
    text-decoration: none;
    padding: 10px;
}

nav a:hover {
    background: #bbb;
}

nav li {
    background: #aaa;
    padding: 10px 0;

}

nav ul  {
    background: #aaa;
    list-style-type: none;
    margin: 0;
    padding: 0;

}

@media (min-width: 768px) {

    nav ul {
        display: flex;
    }
}

js

function applyNavbarSticky() {
    let header = document.querySelector('body > header:first-child')
    let navbar = document.querySelector('nav')
    header.style.position = 'sticky'

    function setTop() {
        let headerHeight = header.clientHeight
        let navbarHeight = navbar.clientHeight
        let styleTop = navbarHeight - headerHeight

        header.style.top = `${styleTop}px`
    }

    setTop()

    window.onresize = function () {
        setTop()
    }
}

0

z-indexjuga sangat penting. Kadang-kadang itu akan berhasil tetapi Anda tidak akan melihatnya. Coba atur ke angka yang sangat tinggi hanya untuk memastikan. Juga tidak selalu menempatkan top: 0tetapi mencoba sesuatu yang lebih tinggi jika tersembunyi di suatu tempat (di bawah toolbar)


0

Inilah yang membuat saya tersandung ... div lengket saya ada di dalam div lain sehingga div induk perlu beberapa konten tambahan SETELAH div lengket, untuk membuat div induk "cukup tinggi" untuk lengket div untuk "geser" konten lainnya sebagai Anda gulir ke bawah.

Jadi dalam kasus saya, tepat setelah div lengket, saya harus menambahkan:

    %div{style:"height:600px;"} 
      &nbsp;

(Aplikasi saya memiliki dua div berdampingan, dengan gambar "tinggi" di sebelah kiri, dan formulir entri data pendek di sebelah kanan, dan saya ingin formulir entri data melayang di sebelah gambar saat Anda menggulir ke bawah, jadi formulir selalu di layar. Itu tidak akan berfungsi sampai saya menambahkan "konten ekstra" di atas sehingga div lengket memiliki sesuatu untuk "meluncur"


-1

BENAR bahwa overflowkebutuhan untuk dihapus atau diatur initialuntuk membuat position: stickykarya pada elemen anak. Saya menggunakan Desain Material di aplikasi Angular saya dan menemukan bahwa beberapa komponen Material mengubah overflownilainya. Perbaikan untuk skenario saya adalah

mat-sidenav-container, mat-sidenav-content {
  overflow: initial;
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.