Saya ingin membuat Navigasi Bar tongkat ke atas setelah saya scroll untuk itu, tapi itu's tidak bekerja dan saya tidak tahu mengapa. Jika anda dapat segera membantu, berikut adalah kode HTML dan CSS:
.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>
Periksa apakah nenek moyang elemen memiliki set meluap (misalnya overflow:hidden
); coba alihkan itu. Anda mungkin harus naik pohon DOM lebih tinggi dari yang anda harapkan =).
Hal ini dapat mempengaruhi anda posisi:lengket
pada elemen keturunan.
Sticky positioning adalah hibrida relatif dan posisi tetap. Unsur-unsur tersebut diperlakukan sebagai relatif diposisikan hingga melewati batas yang ditentukan, di mana titik itu diperlakukan sebagai fixed strategis. ... Anda harus menentukan ambang batas dengan setidaknya salah satu dari
top
,kanan
,bawah
, ataukiri
untuk lengket posisi untuk berperilaku seperti yang diharapkan. Jika tidak, itu akan menjadi tidak bisa dibedakan dari posisi relatif. [sumber: MDN]
Jadi dalam contoh anda, anda harus menentukan posisi di mana ia harus tetap di ujung dengan menggunakan top
properti.
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>
Saya punya masalah yang sama, dan saya menemukan jawabannya di sini.
Jika anda elemen isn't menempel seperti yang diharapkan hal pertama untuk memeriksa adalah aturan yang diterapkan ke dalam wadah.
Secara khusus, mencari meluap setiap properti yang ditetapkan pada orangtua. Anda dapat't menggunakan: overflow: hidden
, overflow: scroll
atau overflow: auto
pada orang tua dari posisi: lengket
elemen.
Beberapa hal yang saya've datang di:
Ketika anda lengket elemen komponen (sudut dll)
<aplikasi-menu-bar>
anda akan perlu untuk menambahkan baris berikut ke komponen's css::host { display: block; } atau
aplikasi-menu-bar { display: block; } // (di mengandung komponen's css)
Safari pada iOS khususnya tampaknya memerlukan display:block
bahkan pada elemen akar app-root
dari sudut aplikasi atau tidak't stick.
yang diterapkan untuk 'outer' pemilih (misalnya.
app-menu-bardi devtools harus menunjukkan posisi sticky) dan bukan top level
div*dalam* komponen. Dengan Sudut, hal ini dapat dicapai dengan:host
selector dalam css untuk komponen anda.:host { posisi: lengket; display: block; // ini adalah sama seperti yang ditunjukkan di atas top: 0; background: red; }
Lain-lain
.lengket-elemen { z-index: 100; } .orang tua-dari-lengket-elemen { position: relative; }
Anda lengket elemen harus terlebih dahulu (sebelum konten anda) jika menggunakan top
dan setelah itu jika menggunakan bawah
.
Ada komplikasi ketika menggunakan overflow: hidden
pada pembungkus elemen – pada umumnya akan membunuh lengket elemen di dalamnya. Baik dijelaskan dalam pertanyaan ini
Mobile browser dapat menonaktifkan lengket/tetap diposisikan item ketika keyboard layar terlihat. I'm tidak yakin aturan yang tepat (tidak ada yang pernah tahu) tapi ketika keyboard anda terlihat're melihat semacam 'jendela' ke jendela dan anda tidak't dengan mudah bisa mendapatkan hal-hal untuk tetap aktual terlihat atas layar.
Pastikan anda memiliki:
posisi: lengket;
dan tidak
display: lengket;
Misc kegunaan kekhawatiran
Ini adalah kelanjutan dari jawaban dari MarsAndBack dan Miftah Mizwar.
Mereka jawaban yang benar. Namun, sulit untuk mengidentifikasi masalah nenek moyang(s).
Untuk membuat ini sangat sederhana, hanya menjalankan script jQuery di konsol browser anda dan akan memberitahu anda nilai overflow property pada setiap nenek moyang.
$('.your-sticky-element').parents().filter(function() {
console.log($(this));
console.log($(this).css('overflow'));
return $(this).css('overflow') === 'hidden';
});
Di mana nenek moyang yang tidak memiliki overflow: visible
mengubah CSS sehingga tidak!
Juga, seperti yang dinyatakan di tempat lain, pastikan anda lengket elemen ini dalam CSS:
.your-sticky-element {
position: sticky;
top: 0;
}
Saya harus menggunakan CSS berikut untuk membuatnya bekerja:
.parent {
display: flex;
justify-content: space-around;
align-items: flex-start;
overflow: visible;
}
.sticky {
position: sticky;
position: -webkit-sticky;
top: 0;
}
Jika atas dosen't bekerja kemudian...
Pergi melalui semua nenek moyang dan pastikan tidak ada elemen-elemen ini memiliki overflow: hidden
. Anda harus mengubah ini untuk overflow: visible
dari komentar saya:
posisi:lengket
membutuhkan coordonate tel mana untuk bertahan
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 digunakan untuk browser lainnya dari FF dan Chrome . Ini adalah eksperimental dengan aturan-aturan yang dapat dilaksanakan atau tidak di setiap waktu melalui browser. Chrome tambahkan beberapa tahun yang lalu dan kemudian menjatuhkannya, tampaknya kembali ... tapi untuk berapa lama ?
Yang paling dekat akan position:relative + coordonates diperbarui sementara bergulir setelah mencapai titik lengket, jika anda ingin mengubah ini menjadi sebuah script javascript
Tampaknya seperti itu navbar menjadi stickied seharusnya't berada di dalam setiap div atau bagian lain dari konten. Tidak ada solusi yang bekerja untuk saya sampai saya mengambil navbar keluar dari div yang navbar bersama dengan yang lain topbar .Sebelumnya saya telah topbar dan navbar dibungkus dengan div.
Saya tahu ini adalah sebuah posting lama. Tapi jika ada's seseorang seperti saya yang baru mulai main-main dengan posisi: lengket ini dapat berguna.
Dalam kasus saya saya menggunakan posisi: sticky sebagai grid-item. Itu tidak bekerja dan masalah overflow-x: hidden pada html
elemen. Segera setelah saya dihapus properti itu bekerja dengan baik. Memiliki overflow-x: hidden pada tubuh
elemen tampaknya bekerja tho, tidak tahu mengapa belum.
dua jawaban berikut ini:
menghapus overflow
milik dari tubuh
tag
set height: 100%
ke tubuh
untuk memperbaiki masalah dengan overflow-y: auto
min-height: 100%
tidak-bekerja bukanheight: 100%
Saya percaya artikel ini mengatakan banyak tentang bagaimana lengket
bekerja
Bagaimana Posisi CSS Sticky benar-Benar Bekerja! Posisi CSS sticky memiliki dua bagian utama, ketan item & sticky wadah.
Ketan Item — adalah elemen yang kita definisikan dengan posisi: lengket gaya. Elemen akan mengapung ketika posisi viewport sesuai dengan definisi posisi, misalnya:
top: 0px
.Lengket Wadah —adalah elemen HTML yang membungkus ketan item. Ini adalah maksimum daerah yang lengket item dapat mengapung di.
Ketika anda mendefinisikan sebuah elemen dengan position: lengket anda secara otomatis mendefinisikan elemen induk sebagai lengket wadah!
Aku tahu ini tampaknya sudah dijawab, tapi aku berlari ke kasus tertentu, dan saya merasa jawaban yang paling kehilangan titik.
The overflow:hidden
jawaban mencakup 90% dari kasus. Yang's lebih atau kurang "nav lengket" skenario.
Tapi lengket perilaku ini paling baik digunakan dalam ketinggian sebuah wadah. Pikirkan form newsletter di kolom kanan situs web anda yang akan bergulir ke bawah dengan halaman. Jika anda lengket elemen adalah satu-satunya anak dari wadah, wadah ukuran yang sama persis, dan ada's tidak ada ruang untuk menggulir.
Wadah anda perlu ketinggian yang anda harapkan elemen anda untuk menggulir sekitar. Yang di saya "kolom kanan" skenario ketinggian kolom kiri.
Cara terbaik untuk mencapai ini adalah dengan menggunakan display:table-cell
pada kolom. Jika anda dapat't, dan terjebak dengan float:right
dan seperti saya, anda'll harus menebak kolom kiri ketinggian menghitung dengan Javascript.
It's BENAR bahwa overflow
perlu dihapus atau mengatur untuk awal
untuk membuat posisi: lengket
bekerja pada elemen anak. Saya menggunakan Desain Material di Sudut aplikasi dan menemukan bahwa some komponen Bahan berubah overflow
nilai. Perbaiki untuk saya adalah skenario
mat-sidenav-container, mat-sidenav-content {
overflow: initial;
}
jika danday74's memperbaiki doesn't bekerja, periksa bahwa elemen induk memiliki tinggi.
Dalam kasus saya, saya memiliki dua anak, satu floating kiri dan satu floating kanan.
Aku ingin benar mengambang satu untuk menjadi lengket tapi harus menambahkan <div style="clear: both;"></div>
pada akhir dari orang tua, untuk memberikan tinggi.