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


177

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>


10
pozycja: lepki potrzebuje koordynacji, aby tel, gdzie się trzymać
G-Cyrillus

36
Musisz także uważać na elementy nadrzędne. position: stickymoże przestać działać, czy to wewnątrz schematu flexbox jeśli nie jesteś ostrożny , a także zawieść Jeśli istnieje overflow: hiddenlub overflow: automiędzy nim a cokolwiek to przewija wewnątrz (root ciała lub najbliższego przodka z overflow: scroll)
user56reinstatemonica8

2
@ user56reinstatemonica8 OMG, dziękuję bardzo za powiedzenie mi o overflow: hiddeni overflow: auto! Od dni
drapię się po

Odpowiedzi:


206

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>


124
Generalnie ta odpowiedź nie wystarczy, aby się przyklejać do pracy, rodzic również nie powinien mieć właściwości przepełnienia.
ViliusL

Dziękuję za Twój komentarz. Zgadzam się z Tobą, że w przypadku innych przykładów niż PO moja odpowiedź może być niewystarczająca. Inne odpowiedzi wskazują na to :)
Marvin,

Myślę, że sztuczka polega na tym, że pozycja sticky może być zastosowana tylko do dzieci, które należą do przewijanego rodzica o znanym wzroście (bezpośrednie dzieci w flexboksie mają znaną wysokość, która jest obliczana z innego elementu flex)
code4j

@ViliusL dziękuję za komentarz! To był problem, który miałem z pozycją: lepka, nie wiedziałbym, gdyby nie ty, ponieważ nigdzie nie znalazłem tych informacji.
Piotr Szlagura

pozycja lepka nie powinna mieć rodzica z właściwością przepełnienia, również lepka nie jest obsługiwana w niektórych przeglądarkach internetowych
Rohan Shenoy

331

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.


36
Chciałbym móc głosować za Ciebie wiele razy! Gryzło mnie to częściej, niż bym się chciał przyznać.
Alexander Varwijk

2
To jest właściwa odpowiedź. Jednak ustalenie, który element nadrzędny powoduje problem, może być trudne. Napisałem skrypt jquery, aby pomóc zidentyfikować właściwość przepełnienia na rodzicach, którzy zidentyfikowali problem (po prostu uruchom go w konsoli). Ponieważ skrypt składa się z kilku linijek, dodałem odpowiedź zawierającą poniższy skrypt.
danday74

5
Brakowało mi "s" w twoich "elementach rodzicielskich"
che-azeh

5
Brakowało mi też „s” :( i to był problem. W wielu miejscach ludzie piszą, że powinieneś sprawdzić tylko rodzica, a nie wszystkich rodziców. Znalazłem swój problem, sprawdzając, czy zadzwonienie $(stickyElement).parents().css("overflow", "visible")w konsoli internetowej pomoże i tak. Potem znalazłem daleki rodzic ze overflow:hiddenstylem, który spowodował problem. Chciałbym dokładniej przeczytać tę odpowiedź.
Mariusz Pawelski

2
Jeśli potrzebujesz sprawdzić overflow:hidden, możesz uruchomić ten skrypt w konsoli przeglądarki, aby sprawdzić wszystkich rodziców / przodków danego elementu: gist.github.com/brandonjp/478cf6e32d90ab9cb2cd8cbb0799c7a7
brandonjp

100

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.


To również jest prawidłowa odpowiedź, ale zobacz także moją odpowiedź, która pomaga łatwo zidentyfikować rodzica powodującego problem.
danday74

9
Należy sprawdzić nie tylko najbliższy pojemnik macierzystym, lecz wszystkie elementu nadrzędnego s .
Mariusz Pawelski

tak, zobacz moją odpowiedź, aby zrobić dokładnie to i bardzo szybko sprawdzić WSZYSTKICH rodziców
danday74

1
Link też mi pomógł. Mój problem został rozwiązany przez „... Jeśli nie używasz przepełnienia i nadal masz problemy, warto sprawdzić, czy wysokość jest ustawiona na rodzica ...”
xenetics

Oszczędzanie życia, naprawdę prosty opis problemu, ale czy jest jakieś rozwiązanie tego po prostu ciekawe
Rahul Singh

32

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.

@Sergey Nie jestem całkowicie pewien, który z nich display: blocki position: relativewyzwala prawidłowe zachowanie w Safari - czy wydawało się, że wystarczyło display: block? Oczywiście, prawdopodobnie nie zaszkodzi, że oba określono
Simon_Weaver

2
Po prostu display: blockwystarczyło
Sergey

27

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

2
To było bardzo pomocne. Udało mi się szybko zidentyfikować element nadrzędny, który miał wartość overflow: invisible.
David Brower

4
Jeśli nie masz jQuery na swojej stronie, możesz uruchomić ten mały fragment w konsoli, aby go dodać: (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
Możesz również uruchomić ten fragment kodu, który nie wymaga JQuery, aby znaleźć niewidoczny element nadrzędny przepełnienia: 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; }gdzie $0jest ostatni element wybrany w narzędziach programistycznych.
Mariusz Pawelski

12

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


1
display: flex robi wszystko
MaciejLisCK

6

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

display: unset

Pracował dla mnie


To jest jeden.
mm-93

O! Wydaje się, że jest to obejście w przypadku, gdy element nadrzędny ma ograniczoną wysokość (np. Kontener paska nawigacyjnego lub coś w tym stylu, w przeciwieństwie do całego ciała lub kontenera strony) - wygląda na to, że kleiste elementy nie lubią przewijać rodzice (co jest absolutnie śmieszne!) Teraz każdy musi mieć tyle szczęścia, aby móc ustawić rodzica display: unset, co nie zawsze może być natychmiast opłacalne
Ben Philipp

Wydaje się również, że działa z contents, initial(?) Iinline
Ben Philippem

5

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.


Czy masz źródło tego lub inne informacje, jak to obejść?
AJMansfield,

5

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.


Dziękuję, właśnie tego szukałem! U mnie nie było rodziców z przepełnieniem ani problemów z wysokością. Fajnie byłoby zobaczyć te informacje również w zaakceptowanej odpowiedzi.
saglamcem

Właśnie eksperymentując dowiedziałem się, że plik sticky nie przewija się poza swój element nadrzędny. Nie ma znaczenia, ile ma innego rodzeństwa, ale jego rodzic najwyraźniej nie może być kontenerem paska nawigacyjnego, ale musi być czymś na poziomie niższym niż kontener strony / treści :( To jest śmieszne
Ben Philipp

Ale Lo! Jeśli możesz, jeśli ustawisz rodzica ograniczającego na display: unset, to ograniczenie zostanie zniesione! zobacz stackoverflow.com/a/60560997/2902367 Wydaje się również, że działa z contents, initial(?) iinline
Ben Philippem

4

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


4

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.


2
„Jeśli twój przyklejony element jest jedynym elementem podrzędnym kontenera, kontener ma dokładnie ten sam rozmiar i nie ma miejsca na przewijanie”. ZŁOTO!!! Dziękuję Ci!
Mark Jackson

Tak! Zajęło mi trochę czasu, zanim to rozgryzłem. Na początku uznałam to za niedorzeczne ograniczenie, ale przypuszczam, że powinna istnieć przynajmniej taka opcja . Wolałbym coś takiego sticky-limit: parent, sticky-limit: bodyalbo sticky-limit: nth-parent(3)... W każdym razie: Jeśli możesz, możesz znieść to ograniczenie, ustawiając ograniczającego rodzica na display: unset, jak wspomniano na stackoverflow.com/a/60560997/2902367 . Wydaje się również, że działa z contents, initial(?) Iinline
Ben Philippem

3

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.


1

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%


1

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!


1

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


0

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


Nie jestem pewien, dlaczego ktoś zrzucił to głosowanie, ale tak właśnie było w moim przypadku: dodałem float:leftdo elementu nadrzędnego (bez pływaka jego wysokość wynosiła 0) i position:stickydziałałem.
aexl

0

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

0

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


0

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

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


-1

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;
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.