"Posisi: lengket;" tidak Bekerja CSS dan HTML

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>

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>

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.

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.

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.

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

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

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

display: unset

Bekerja untukku

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

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.

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

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.

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

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%

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!

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

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.

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

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)

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

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

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