“Pozisyon: yapışkan;” Çalışmıyor CSS ve HTML

Gezinme Çubuğu'nun üzerine geldikten sonra üste yapışmasını istiyorum, ancak çalışmıyor ve neden olduğuna dair hiçbir fikrim yok. Lütfen yardım edebilirseniz, HTML ve CSS kodum:

.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>

Yapışkan konumlandırma, göreceli ve sabit konumlandırmanın bir melezidir. Eleman, belirtilen bir eşiği geçene kadar göreli olarak konumlandırılır ve bu noktada sabit konumlandırılmış olarak değerlendirilir.
...
Sen en az biriyle eşiği belirtmelisiniz top, right, bottomveya leftdavranır yapışkan konumlandırma için beklendiği gibi. Aksi takdirde, göreli konumlandırmadan ayırt edilemez olacaktır. [ kaynak: MDN ]

Bu nedenle, örneğinizde, topözelliği kullanarak sonuna yapışması gereken konumu tanımlamanız gerekir .

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>

Bir ata elemanının taşma ayarlı olup olmadığını kontrol edin (örn. overflow:hidden); değiştirmeyi deneyin. DOM ağacını beklediğinizden daha yükseğe çıkmanız gerekebilir =).

Bu, position:stickytorun öğenizi etkileyebilir .

Aynı problemim var ve cevabı burada buldum .

Öğeniz beklendiği gibi yapışmazsa, kontrol edilmesi gereken ilk şey, kaba uygulanan kurallardır.

Özellikle, üst öğe üzerinde ayarlanmış herhangi bir taşma özelliği olup olmadığına bakın. : , Veya öğenin üst öğesinde kullanamazsınız .overflow: hiddenoverflow: scrolloverflow: autoposition: sticky

Karşılaştığım birkaç şey daha var:

Yapışkan öğeniz bir bileşen olduğunda (açısal vb.)

• 'Yapışkan' öğenin kendisi, adında açısal bir bileşen gibi özel bir öğe seçiciye sahip bir bileşense, bileşenin css'sine <app-menu-bar>aşağıdakileri eklemeniz gerekir:

  :host { display: block; }   

  veya

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

  Özellikle iOS'ta Safari, açısal bir uygulamanın display:blockkök öğesinde bile gerekiyor gibi görünüyor app-rootveya yapışmayacak.

• Eğer bir bileşen oluşturma ve bileşenlerin içinde css tanımlıyorsanız emin olun, (DOM / kapsüllü stilleri gölge) position: sticky(. Örn 'dış' seçicinin uygulanıyor app-menu-barDevTools'un yapışkan pozisyonunu göstermesi gerekir) ve bir üst düzey div içinde bileşen. Angular ile bu, :hostbileşeniniz için css'deki seçici ile gerçekleştirilebilir .

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

Diğer

• Yapışkan öğenizi takip eden öğenin sağlam bir arka planı varsa, altından kaymasını durdurmak için aşağıdakileri eklemeniz gerekir:

  .sticky-element { z-index: 100; }
  .parent-of-sticky-element { position: relative; }

• Yapışkan öğeniz kullanılıyorsa önce (içeriğinizin önünde) topve kullanılıyorsa sonra olmalıdır bottom.

• overflow: hiddenSarma elemanınızda kullanırken komplikasyonlar vardır - genel olarak içindeki yapışkan elemanı öldürür. Bu soruda daha iyi açıklanmış

• Mobil tarayıcılar, ekran klavyesi görünür olduğunda yapışkan / sabit konumlu öğeleri devre dışı bırakabilir. Tam kurallardan emin değilim (kimse biliyor mu), ancak klavye göründüğünde pencereye bir tür 'pencere' bakıyorsunuz ve bir şeyleri kolayca yapıştıramayacaksınız. gerçek görünür ekran üstü.

• Sahip olduğundan emin ol:

  position: sticky;

  ve yok

  display: sticky;

Çeşitli kullanılabilirlik sorunları

• Tasarımınız mobil cihazlarda ekranın altına bir şeyler yapıştırmayı gerektiriyorsa dikkatli olun. Örneğin iPhone X'ta kaydırma bölgesini (ana sayfaya geri dönmek için) belirtmek için dar bir çizgi gösterirler ve bu bölgedeki öğeler tıklanabilir değildir. Yani bir şey yapıştırırsanız, iPhone X üzerinde kullanıcıların etkinleştirebileceğini test ettiğinizden emin olun. İnsanlar tıklayamazsa büyük bir 'Şimdi Satın Al' düğmesi iyi değildir!
• Facebook'ta reklam yayınlıyorsanız, web sayfası Facebook'un mobil uygulamalarındaki 'web görünümü' kontrolünde görüntülenir. Özellikle video görüntülerken (içeriğiniz yalnızca ekranın alt yarısında başlar) - genellikle sayfanızı yapışkan öğelerin sayfanın üstünden kaybolmasına izin veren kaydırılabilir bir görünüm penceresine koyarak yapışkan öğeleri tamamen karıştırırlar. Yalnızca telefonun tarayıcısında veya hatta Facebook'un tarayıcısında değil, farklı şekilde davranabilecek gerçek bir reklam bağlamında test ettiğinizden emin olun.

Bu MarsAndBack ve Miftah Mizwar'ın cevaplarının devamıdır.

Cevapları doğru. Ancak problem atalarını tanımlamak zordur.

Bunu çok basitleştirmek için, tarayıcı konsolunuzda bu jQuery komut dosyasını çalıştırmanız yeterlidir ve size her atadaki taşma özelliğinin değerini söyleyecektir.

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

Bir ata overflow: visible, CSS'sini değiştirmediği şekilde değiştirir!

Ayrıca, başka bir yerde belirtildiği gibi, yapışkan öğenizin CSS'de buna sahip olduğundan emin olun:

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

Çalıştırmak için aşağıdaki CSS'yi kullanmak zorunda kaldım:

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

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

Yukarıdaki doz işe yaramazsa ...

Tüm ataları gözden geçirin ve bu öğelerin hiçbirinin olmadığından emin olun overflow: hidden. Bunu şu şekilde değiştirmeniz gerekir:overflow: visible

Bununla karşılaşırsanız ve yapışkanınız çalışmıyorsa, üst öğeyi şu şekilde ayarlamayı deneyin:

display: unset

Benim için çalıştı

Benim için açık olmayan komik an: position: stickyDevTools kullanarak ayarladıysanız en azından Chrome 70'te uygulanmaz.

Yapışacak olan navbarın başka içerikli herhangi bir div veya bölüm içinde olmaması gerekir. Navbar'ın başka bir topbar ile paylaştığı div'den çıkana kadar çözümün hiçbiri benim için çalışmadı. Daha önce ortak bir div ile sarılmış topbar ve navbar vardı.

yorumumdan:

position:sticky nereye yapışmak için bir coordonate ihtiyacı

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>

FF ve Chrome dışındaki diğer tarayıcılarda kullanılacak çoklu dolgu var. Bu, tarayıcılar aracılığıyla herhangi bir zamanda uygulanabilen veya uygulanamayan deneysel bir kuraldır. Chrome birkaç yıl önce ekledikten sonra bıraktı, geri döndü ... ama ne kadar sürecek?

En yakın konum şu olurdu: kaydırma sırasında güncellenen göreceli + koordinatlar bir kez yapışkan noktaya ulaştı, eğer bunu bir javascript betiğine dönüştürmek istiyorsanız

Bunun zaten cevaplanmış gibi göründüğünü biliyorum, ama belirli bir vakaya rastladım ve çoğu cevabın noktayı kaçırdığını hissediyorum.

overflow:hiddenCevaplar vakaların% 90'nını. Bu aşağı yukarı "yapışkan nav" senaryosudur.

Ancak yapışkan davranış en iyi bir kabın yüksekliği içinde kullanılır. Web sitenizin sağ sütununda, sayfayı aşağı kaydıran bir bülten formu düşünün. Yapışkan öğeniz kabın tek çocuğuysa, kap aynı boyuttadır ve kaydırılacak yer yoktur.

Kapsayıcınızın öğenizin içeri kaymasını beklediğiniz yükseklik olması gerekir. Hangi "sağ sütun" senaryomda sol sütunun yüksekliği. Bunu başarmanın en iyi yolu display:table-cellsütunlarda kullanmaktır . Yapamıyorsanız ve sıkıştığım float:rightgibi ve benim gibi, ya Javascript ile hesaplamak için sol sütun yüksekliğini tahmin etmek gerekir.

Bunun eski bir yazı olduğunu biliyorum. Ama son zamanlarda pozisyonla uğraşmaya başlayan benim gibi biri varsa: yapışkan bu yararlı olabilir.

Benim durumumda bir grid öğesi olarak yapışkan pozisyon kullanıyordum. Çalışmıyordu ve sorun bir taşma-x: htmlöğede gizli . Bu özelliği kaldırır kaldırmaz iyi çalıştı. Taşma-x: bodyöğe üzerinde gizli tho tho gibi görünüyordu, henüz bir fikrim yok.

burada iki cevap:

1. overflowmülkü bodyetiketten kaldır

2. set height: 100%için bodybirlikte sorunu çözmek içinoverflow-y: auto

min-height: 100% yerine çalışmıyor height: 100%

Bu makalenin nasıl stickyçalıştığı hakkında çok şey söylediğine inanıyorum

CSS Pozisyon Yapışkan Gerçekten Nasıl Çalışır! CSS pozisyon yapışkan iki ana parçaları vardır, yapışkan madde ve yapışkan konteyner .

Yapışkan Öğe  - konumla tanımladığımız öğedir: yapışkan stiller. Görünüm, konum, örneğin, konum tanıma eşleştiğinde elemanı yüzer: top: 0px.

Yapışkan Kapsayıcı - yapışkan öğeyi saran HTML öğesidir. Bu, yapışkan öğenin yüzebileceği maksimum alandır.

Position: sticky olan bir öğeyi tanımladığınızda, üst öğeyi otomatik olarak yapışkan bir kap olarak tanımlarsınız!

Yapışkan bir elemanın gerçek davranışı:

• İlk olarak bir süre göreceli
• sonra bir süre sabittir
• Sonunda, görünümden kaybolur

Yapışkan olarak konumlandırılmış bir eleman, içerme bloğu akış kökü (veya içinde kaydırdığı kap) içinde belirtilen bir eşiği (örneğin, ayar değeri otomatik olarak dışında bir değere) geçinceye kadar göreli olarak konumlandırılır ve bu noktada "sıkışmış" olarak işlem görür "içeren bloğun karşı kenarını karşılayana kadar.

Öğe, belgenin normal akışına göre konumlandırılır ve daha sonra üst, sağ, alt değerlerine dayalı olarak tabloyla ilgili öğeler dahil en yakın kaydırma atasına ve içeren bloğa (en yakın blok düzeyi atası) göre kaydırılır. ve sol. Ofset, diğer öğelerin konumunu etkilemez.

Bu değer her zaman yeni bir yığın içeriği oluşturur. Yapışkan bir öğenin, en yakın gerçekte kaydırma atası olmasa bile, "kaydırma mekanizması" (taşma gizli, kaydırma, otomatik veya yer paylaşımı oluşturulduğunda oluşturulan) olan en yakın ataya "yapıştığını" unutmayın.

Bu örnek anlamanıza yardımcı olacaktır:

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

danday74'ün düzeltmesi işe yaramazsa, üst öğenin yüksekliğinin olup olmadığını kontrol edin.

Benim durumumda biri solda biri sağda olmak üzere iki çocuğum vardı. Doğru yüzen kişinin yapışkan olmasını istedim, ancak <div style="clear: both;"></div>ebeveynin sonuna bir yükseklik eklemek için a eklemek zorunda kaldım .

Bir JS çözümü kullandım. Firefox ve Chrome'da çalışır. Herhangi bir sorun, bana bildirin.

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-indexaynı zamanda çok önemlidir. Bazen işe yarar ama göremezsiniz. Emin olmak için çok yüksek bir sayıya ayarlamayı deneyin. Ayrıca her zaman koymayın top: 0ama bir yere (araç çubuğunun altında) gizlenmesi durumunda daha yüksek bir şey deneyin.

İşte beni harekete geçiren şey ... yapışkan div'ım başka bir div'ın içindeydi, bu nedenle üst div, yapışkan div'ın yapışkan içeriğinin diğer içeriği "kaydırması" için "yeterince uzun" olmasını sağlamak için ek div'a bazı ek içeriğe ihtiyaç duyuyordu. aşağı kaydırırsınız.

Benim durumumda, yapışkan div'ın hemen ardından şunu eklemek zorunda kaldım:

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

(Uygulamamda solda "uzun" bir resim ve sağda kısa bir veri giriş formu bulunan iki yan yana div var ve siz aşağı kaydırdıkça veri giriş formunun resmin yanında süzülmesini istedim, bu yüzden form her zaman ekrandadır. Ben yukarıdaki "ekstra içeriği" ekleyene kadar işe yaramaz bu yüzden yapışkan div "üzerinde kaymak" bir şey var

O DOĞRU var overflowihtiyaçlar kaldırıldı veya ayarlanacak initialyapmak için position: stickyalt öğe üzerinde çalışmalarını. Açısal uygulamamda Malzeme Tasarımı kullandım ve bazı Malzeme bileşenlerinin overflowdeğeri değiştirdiğini öğrendim . Senaryom için düzeltme

mat-sidenav-container, mat-sidenav-content {
  overflow: initial;
}