„Pozycja: lepka” nie działa CSS i HTML

Chcę, aby pasek nawigacji trzymał się u góry po przewinięciu do niego, ale nie działa i nie mam pojęcia, dlaczego. Jeśli możesz mi pomóc, oto mój kod HTML i 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>

Lepkie pozycjonowanie jest hybrydą pozycjonowania względnego i ustalonego. Element jest traktowany jako pozycjonowany względnie, dopóki nie przekroczy określonego progu, w którym to momencie jest traktowany jako pozycjonowany o stałej pozycji.
...
Musisz określić próg z co najmniej jednej top, right, bottom, lub leftza lepki pozycjonowania zachowywać się zgodnie z oczekiwaniami. W przeciwnym razie będzie nie do odróżnienia od pozycjonowania względnego. [ źródło: MDN ]

W swoim przykładzie musisz więc zdefiniować pozycję, w której powinien się na końcu trzymać, używając topwłaściwości.

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>

Sprawdź, czy element nadrzędny ma ustawioną przepełnienie (np. overflow:hidden); spróbuj to zmienić. Być może będziesz musiał przejść w górę drzewa DOM wyżej niż się spodziewasz =).

Może to mieć wpływ position:stickyna element podrzędny.

Mam ten sam problem i tutaj znalazłem odpowiedź .

Jeśli Twój element nie przywiera zgodnie z oczekiwaniami, pierwszą rzeczą do sprawdzenia są reguły zastosowane do kontenera.

W szczególności poszukaj dowolnej właściwości przepełnienia ustawionej dla elementu nadrzędnego. Nie można używać : overflow: hidden, overflow: scrolllub overflow: autona rodzica position: stickyelementu.

Kilka innych rzeczy, z którymi się spotkałem:

Kiedy twój lepki element jest komponentem (kanciasty itp.)

• Jeśli sam element „sticky” jest komponentem z niestandardowym selektorem elementu, takim jak komponent kątowy o nazwie <app-menu-bar>, musisz dodać następujące elementy do css komponentu:

  :host { display: block; }   

  lub

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

  Wydaje się, że zwłaszcza Safari na iOS wymaga display:blocknawet głównego elementu app-rootaplikacji kątowej lub nie będzie się trzymać.

• Jeśli tworzysz komponent i definiujesz css wewnątrz komponentu (cień DOM / style hermetyzowane), upewnij się, że position: stickyjest on stosowany do selektora „zewnętrznego” (np. app-menu-barW devtools powinien pokazywać pozycję sticky), a nie najwyższego poziomu div w składnik. Dzięki Angularowi można to osiągnąć za pomocą :hostselektora w css dla twojego komponentu.

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

Inny

• Jeśli element następujący po przyklejonym elemencie ma jednolite tło, musisz dodać następujące elementy, aby nie przesuwał się pod spodem:

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

• Twój lepki element musi być pierwszy (przed treścią), jeśli używasz, topi po nim, jeśli używasz bottom.

• Występują komplikacje podczas używania overflow: hiddenna elemencie wrapper - generalnie zabije to lepki element wewnątrz. Lepiej wyjaśnione w tym pytaniu

• Przeglądarki mobilne mogą wyłączać przyklejone / nieruchome elementy, gdy widoczna jest klawiatura ekranowa. Nie jestem pewien dokładnych zasad (czy ktokolwiek wie), ale kiedy klawiatura jest widoczna, patrzysz na coś w rodzaju `` okna '' w oknie i nie będziesz w stanie łatwo przykleić rzeczy do rzeczywista widoczna góra ekranu.

• Upewnij się że masz:

  position: sticky;

  i nie

  display: sticky;

Różne problemy związane z użytecznością

• Zachowaj ostrożność, jeśli projekt wymaga przyklejenia elementów u dołu ekranu na urządzeniach mobilnych. Na przykład na iPhonie X wyświetlają wąską linię, aby wskazać obszar przesuwania (aby wrócić do strony głównej) - a elementy w tym regionie nie są klikalne. Jeśli więc coś tam umieścisz, przetestuj na iPhonie X, czy użytkownicy mogą go aktywować. Duży przycisk „Kup teraz” nie jest dobry, jeśli ludzie nie mogą go kliknąć!
• Jeśli reklamujesz się na Facebooku, strona internetowa jest wyświetlana w kontrolce „widok sieciowy” w aplikacjach mobilnych Facebooka. Zwłaszcza podczas wyświetlania wideo (gdzie treść zaczyna się tylko w dolnej połowie ekranu) - często całkowicie psują przyklejone elementy, umieszczając stronę w przewijanym obszarze roboczym, który w rzeczywistości pozwala na zniknięcie lepkich elementów u góry strony. Pamiętaj, aby przetestować w kontekście rzeczywistej reklamy, a nie tylko w przeglądarce telefonu lub nawet przeglądarki Facebooka, która może zachowywać się inaczej.

To jest kontynuacja odpowiedzi MarsAndBack i Miftah Mizwar.

Ich odpowiedzi są prawidłowe. Jednak trudno jest zidentyfikować przodka (przodków) problemu.

Aby było to bardzo proste, po prostu uruchom ten skrypt jQuery w konsoli przeglądarki, a on poinformuje Cię o wartości właściwości przepełnienia dla każdego przodka.

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

Tam, gdzie przodek nie overflow: visiblezmienił swojego CSS, więc ma!

Ponadto, jak stwierdzono w innym miejscu, upewnij się, że twój sticky element ma to w CSS:

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

Musiałem użyć następującego CSS, aby to działało:

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

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

Jeśli powyższe nie działa, to ...

Przejdź przez wszystkich przodków i upewnij się, że żaden z tych elementów nie ma overflow: hidden. Musisz to zmienić naoverflow: visible

O ile natrafiłeś na to, a twój sticky nie działa - spróbuj ustawić rodzica na:

display: unset

Pracował dla mnie

Zabawny moment, który nie był dla mnie oczywisty: przynajmniej w Chrome 70 position: stickynie jest stosowany, jeśli ustawiłeś go za pomocą DevTools.

Wygląda na to, że pasek nawigacyjny, który ma być przyklejony, nie powinien znajdować się wewnątrz żadnego elementu div ani sekcji z inną zawartością. Żadne z rozwiązań nie działało dla mnie, dopóki nie wyjąłem paska nawigacyjnego z div, który navbar dzielił z innym topbar. Wcześniej topbar i navbar były owinięte wspólnym div.

z mojego komentarza:

position:sticky potrzebuje koordynatora, aby zadzwonić, gdzie się trzymać

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>

Istnieje polyfill do wykorzystania w innych przeglądarkach niż FF i Chrome. To jest eksperymentalna reguła, którą można wdrożyć lub nie w dowolnym momencie za pomocą przeglądarki. Chrome dodał go kilka lat temu, a następnie upuścił, wydaje się, że wrócił ... ale na jak długo?

Najbliższa byłaby pozycja: względne + współrzędne aktualizowane podczas przewijania po osiągnięciu lepkiego punktu, jeśli chcesz zmienić to w skrypt javascript

Wiem, że wydaje mi się, że na to już udzielono odpowiedzi, ale trafiłem na konkretny przypadek i czuję, że większość odpowiedzi mija się z celem.

W overflow:hiddenodpowiedzi na pokrycie 90% przypadków. To mniej więcej scenariusz „lepkiej nawigacji”.

Ale lepkość najlepiej jest stosować na wysokości pojemnika. Pomyśl o formularzu biuletynu w prawej kolumnie witryny, który przewija się w dół wraz ze stroną. Jeśli twój lepki element jest jedynym elementem podrzędnym kontenera, kontener ma dokładnie ten sam rozmiar i nie ma miejsca na przewijanie.

Twój kontener musi mieć wysokość, na której spodziewasz się przewijania elementu. Która w moim scenariuszu „prawej kolumny” jest wysokością lewej kolumny. Najlepszym sposobem na osiągnięcie tego jest użycie display:table-cellna kolumnach. Jeśli nie możesz, i utkniesz z float:righti tak jak ja, będziesz musiał albo zgadnąć wysokość lewej kolumny, aby obliczyć ją za pomocą JavaScript.

Wiem, że to stary post. Ale jeśli jest ktoś taki jak ja, który niedawno zaczął bawić się pozycją: lepki, może to być przydatne.

W moim przypadku użyłem position: sticky jako elementu siatki. To nie działało, a problemem był przepełnienie-x: ukryty na htmlelemencie. Jak tylko usunąłem tę właściwość, działało dobrze. Mając overflow-x: ukryty na bodyelemencie wydawał się działać, nie mam jeszcze pojęcia dlaczego.

dwie odpowiedzi tutaj:

1. usuń overflowwłaściwość z bodytagu

2. ustaw height: 100%na, bodyaby rozwiązać problemoverflow-y: auto

min-height: 100% nie działa zamiast height: 100%

Uważam, że ten artykuł wiele mówi o tym, jak stickydziała

Jak naprawdę działa lepka pozycja CSS! Pozycja CSS Sticky ma dwie główne części: lepki przedmiot i lepki pojemnik .

Sticky Item  - to element, który zdefiniowaliśmy za pomocą pozycji: sticky styles. Element będzie unosić gdy pozycja rzutnia odpowiada definicji pozycji, na przykład: top: 0px.

Sticky Container - to element HTML, który otacza przyklejony element. Jest to maksymalny obszar, w którym lepki przedmiot może unosić się.

Kiedy definiujesz element z position: sticky, automatycznie definiujesz element nadrzędny jako lepki kontener!

Prawdziwe zachowanie lepkiego elementu to:

• Po pierwsze jest to przez chwilę względne
• potem jest naprawiony na chwilę
• wreszcie znika z widoku

Element pozycjonowany przyklejony jest traktowany jako pozycjonowany względnie, dopóki jego blok zawierający nie przekroczy określonego progu (takiego jak ustawienie z góry na wartość inną niż auto) w jego źródle przepływu (lub pojemniku, w którym przewija się), w którym to momencie jest traktowany jako „zablokowany "aż do spotkania z przeciwną krawędzią zawierającego ją bloku.

Element jest pozycjonowany zgodnie z normalnym przepływem dokumentu, a następnie przesunięty względem swojego najbliższego przewijanego przodka i zawiera blok (najbliższy przodek na poziomie bloku), w tym elementy związane z tabelą, na podstawie wartości top, right, bottom, i wyszedł. Odsunięcie nie wpływa na położenie żadnych innych elementów.

Ta wartość zawsze tworzy nowy kontekst układania. Zauważ, że lepki element „przykleja się” do swojego najbliższego przodka, który ma „mechanizm przewijania” (tworzony, gdy przepełnienie jest ukryte, przewijane, automatyczne lub nakładane), nawet jeśli ten przodek nie jest najbliższym przodkiem przewijającym się.

Ten przykład pomoże ci zrozumieć:

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

jeśli poprawka danday74 nie działa, sprawdź, czy element nadrzędny ma wysokość.

W moim przypadku miałem dwoje dzieci, jedno w lewo, drugie w prawo. Chciałem, aby prawy pływający stał się lepki, ale musiałem dodać <div style="clear: both;"></div>na końcu rodzica, aby nadać mu wysokość.

Użyłem rozwiązania JS. Działa w przeglądarkach Firefox i Chrome. Jakieś problemy, daj mi znać.

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-indexjest również bardzo ważne. Czasami to zadziała, ale po prostu tego nie zobaczysz. Dla pewności spróbuj ustawić bardzo wysoką liczbę. Nie zawsze też umieszczaj, top: 0ale spróbuj czegoś wyżej, na wypadek gdyby było gdzieś ukryte (pod paskiem narzędzi).

Oto, co mnie zaskoczyło ... mój lepki element div znajdował się wewnątrz innego elementu div, więc nadrzędny element div potrzebował dodatkowej zawartości PO lepkim div, aby nadrzędny element div był „wystarczająco wysoki”, aby przyklejony element div „przesuwał się” po innych treściach przewijasz w dół.

Więc w moim przypadku zaraz po lepkim div musiałem dodać:

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

(Moja aplikacja ma dwa elementy div obok siebie, z „wysokim” obrazem po lewej i krótkim formularzem wprowadzania danych po prawej stronie. Chciałem, aby formularz wprowadzania danych unosił się obok obrazu podczas przewijania w dół, więc formularz jest zawsze na ekranie. Nie zadziała, dopóki nie dodam powyższej „dodatkowej zawartości”, więc przyklejony element div ma coś do „przesuwania”

Prawdą jest, że overflownależy usunąć lub ustawić, initialaby position: stickydziałał na elemencie potomnym. Użyłem Material Design w mojej aplikacji Angular i odkryłem, że niektóre komponenty Material zmieniły overflowwartość. Poprawka dla mojego scenariusza to

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