How does the position sticky property work

Question

I want to make the navigation bar stick to the top of the viewport once a user scrolls the page  but it s not working and I have no clue why  If you can please help  here is my HTML and CSS code   x000D   x000D   container     min-height  300vh     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    x000D   lt main class  container  gt     lt nav style  position  sticky  position  -webkit-sticky   gt       lt ul align  left  gt         lt li gt  lt a href    contact  class  nav-selections  style  margin-right 35px   gt Contact lt  a gt  lt  li gt         lt li gt  lt a href    about  class  nav-selections  gt About lt  a gt  lt  li gt         lt li gt  lt a href    products  class  nav-selections  gt Products lt  a gt  lt  li gt         lt li gt  lt a href     class  nav-selections  gt Home lt  a gt  lt  li gt       lt  ul gt     lt  nav gt   lt  main gt  x000D   x000D   x000D

User · Answer

Check if an ancestor element has overflow set (e.g. overflow:hidden); try toggling it. You may have to go up the DOM tree higher than you expect =).

This may affect your position:sticky on a descendant element.

User · Answer

Using the strategy from this blog  https   www designcise com web tutorial how-to-fix-issues-with-css-position-sticky-not-working  I came up with an option for those that can t have control over all components in the page I m using Angular and in the ngOnInit method I run this code to change the visible propertys of parents to visible        position  sticky    only works if all parent components are visibile     let parent   document querySelector   sticky   parentElement  while  parent      const hasOverflow   getComputedStyle parent  overflow    if  hasOverflow      visible         parent style overflow    visible          console log hasOverflow  parent         parent   parent parentElement

User · Answer

from my comment      position sticky needs a coordonate to tel where to stick     x000D   x000D  nav   x000D    position  sticky  x000D    top  0  x000D    x000D   x000D   nav-selections   x000D    text-transform  uppercase  x000D    letter-spacing  5px  x000D    font  18px  lato   sans-serif  x000D    display  inline-block  x000D    text-decoration  none  x000D    color  white  x000D    padding  18px  x000D    float  right  x000D    margin-left  50px  x000D    transition  1 5s  x000D    x000D   x000D   nav-selections hover   x000D    transition  1 5s  x000D    color  black  x000D    x000D   x000D  ul   x000D    background-color   B79b58  x000D    overflow  auto  x000D    x000D   x000D  li   x000D    list-style-type  none  x000D    x000D   x000D  body   x000D    height  200vh  x000D    x000D   lt nav gt  x000D     lt ul align  left  gt  x000D       lt li gt  lt a href    contact  class  nav-selections  style  margin-right 35px   gt Contact lt  a gt  lt  li gt  x000D       lt li gt  lt a href    about  class  nav-selections  gt About lt  a gt  lt  li gt  x000D       lt li gt  lt a href    products  class  nav-selections  gt Products lt  a gt  lt  li gt  x000D       lt li gt  lt a href     class  nav-selections  gt Home lt  a gt  lt  li gt  x000D     lt  ul gt  x000D   lt  nav gt  x000D   x000D   x000D    There is polyfill to use for other browsers than FF and Chrome   This is an experimental rules that can be implemented or not at any time through browsers  Chrome add it a couple of years ago and then dropped it  it seems back     but for how long    The closest would be position relative   coordonates updated while scrolling once reached the sticky point  if you want to turn this into a javascript script

User · Answer

z-index is also very important  Sometimes it will work but you just won t see it  Try setting it to some very high number just to be sure  Also don t always put top  0 but try something higher in case it s hidden somewhere  under a toolbar

User · Answer

I used a JS solution  It works in Firefox and Chrome  Any problems  let me know   html   lt body gt     lt header id  header  gt       lt h1 gt Extra-Long Page Heading That Wraps lt  h1 gt       lt nav id  nav  gt         lt ul gt           lt li gt  lt a href    title    gt Home lt  a gt  lt  li gt           lt li gt  lt a href    title    gt Page 2 lt  a gt  lt  li gt           lt li gt  lt a href    title    gt Page 3 lt  a gt  lt  li gt         lt  ul gt       lt  nav gt     lt  header gt     lt main gt       lt p gt  lt  -- ridiculously long content -- gt  lt  p gt     lt  main gt     lt footer gt       lt p gt FOOTER CONTENT lt  p gt     lt  footer gt     lt script src  navbar js  type  text javascript  gt  lt  script gt   lt  body gt    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  gt  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

User · Answer

It s TRUE that the overflow needs to be removed or set to initial to make position  sticky works on the child element  I used Material Design in my Angular app and found out that some Material components changed the overflow value  The fix for my scenario is   mat-sidenav-container  mat-sidenav-content     overflow  initial

User · Answer

Here s what was tripping ME up    my sticky div was inside another div so that parent div needed some additional content AFTER the sticky div  to make the parent div  quot tall enough quot  for the sticky div to  quot slide over quot  other content as you scroll down  So in my case  right after the sticky div  I had to add       div style  quot height 600px  quot           amp nbsp    My application has two side-by-side divs  with a  quot tall quot  image on the left  and a short data entry form on the right  and I wanted the data entry form to float next to the image as you scroll down  so the form is always on the screen  It would not work until I added the above  quot extra content quot  so the sticky div has something to  quot slide over quot

User · Answer

I know this seems to be already answered  but I ran into a specific case  and I feel most answers miss the point   The overflow hidden answers cover 90  of the cases  That s more or less the  sticky nav  scenario   But the sticky behavior is best used within the height of a container  Think of a newsletter form in the right column of your website that scrolls down with the page  If your sticky element is the only child of the container  the container is the exact same size  and there s no room to scroll   Your container needs to be the height you expect your element to scroll within  Which in my  right column  scenario is the height of the left column  The best way to achieve this is to use display table-cell on the columns  If you can t  and are stuck with float right and such like I was  you ll have to either guess the left column height of compute it with Javascript

User · Answer

Funny moment that wasn t obvious for me  at least in Chrome 70 position  sticky is not applied if you ve set it using DevTools

User · Answer

I know this is an old post  But if there s someone like me that just recently started messing around with position  sticky this can be useful   In my case i was using position  sticky as a grid-item  It was not working and the problem was an overflow-x  hidden on the html element  As soon as i removed that property it worked fine  Having overflow-x  hidden on the body element seemed to work tho  no idea why yet

User · Answer

I believe this article say a lot about how sticky works     How CSS Position Sticky Really Works    CSS position sticky has two main parts  sticky item  amp  sticky container       Sticky Item     is the element that we defined with the position  sticky styles  The element will float when the viewport position   matches the position definition  for example  top  0px        Sticky Container    is the HTML element which wraps the sticky item  This is the maximum area that the sticky item can float in       When you define an element with position  sticky you   re automatically   defining the parent element as a sticky container

User · Answer

I know it s too late  But I found a solution even if you are using overflow or display flex in parent elements sticky will work  steps   Create a parent element for the element you want to set sticky  Get sure that the created element is relative to body or to full-width  amp  full-height parent    Add the following styles to the parent element    position  absolute  height  100vmax     For the sticky element  get sure to add z-index that is higher than all elements in the page    That s it  Now it must work  Regards

User · Answer

It seems like that the navbar to be stickied  shouldn t be inside any div or section with other content  None of the solution were working for me until I took the navbar out of the div which the navbar shared with another topbar  I previously had topbar and navbar wrapped with a common div

User · Answer

I have same problem  and i found the answer here  If your element isn t sticking as expected the first thing to check are the rules applied to the container  Specifically  look for any overflow property set on any parents of the element  You can t use  overflow  hidden  overflow  scroll or overflow  auto on the parent of a position  sticky element

User · Answer

One of the most common mistakes when going about the position sticky is   Browser not supporting it Not including any top bottom right left properties  Bare in mind that the Browser won t know how to handle that properly if you don t give it enough information  It will be just be statically positioned without it   I have written about that and more insides on this article  Just putting a reference so I don t repeat myself too much

User · Answer

Incase you came across this and your sticky is not working - try setting the parent to   display  unset   Worked for me

User · Answer

The real behavior of a sticky element is   First it is relative for a while then it is fixed for a while finally  it disappears from the view  A stickily positioned element is treated as relatively positioned until its  containing block  crosses a specified threshold  such as setting  top  to value other than auto  within its flow root  or the container it scrolls within   at which point it is treated as  quot stuck quot  until meeting the opposite edge of its  containing block  The element is positioned according to the normal flow of the document  and then offset relative to its  nearest scrolling ancestor  and  containing block   nearest block-level ancestor   including table-related elements  based on the values of  top   right   bottom  and  left  The offset does not affect the position of any other elements  This value always creates a new  stacking context  Note that a sticky element  quot sticks quot  to its nearest ancestor that has a  quot scrolling mechanism quot   created when  overflow  is  hidden   scroll   auto  or  overlay   even if that ancestor isn t the nearest actually scrolling ancestor  This example will help you understand  code   https   codepen io darylljann pen PpjwPM

User · Answer

This is a continuation of the answers from MarsAndBack and Miftah Mizwar   Their answers are correct  However  it is difficult to identify the problem ancestor s    To make this very simple  simply run this jQuery script in your browser console and it will tell you the value of the overflow property on every ancestor       your-sticky-element   parents   filter function         console log   this        console log   this  css  overflow         return   this  css  overflow        hidden         Where an ancestor does not have overflow  visible change its CSS so that it does   Also  as stated elsewhere  make sure your sticky element has this in the CSS    your-sticky-element       position  sticky      top  0

User · Answer

I had to use the following CSS to get it working    parent       display  flex      justify-content  space-around      align-items  flex-start      overflow  visible      sticky       position  sticky      position  -webkit-sticky      top  0      If above dosen t work then     Go through all ancestors and make sure none of these elements have overflow  hidden  You have to change this to overflow  visible

User · Answer

Sticky positioning is a hybrid of relative and fixed positioning  The element is treated as relative positioned until it crosses a specified threshold  at which point it is treated as fixed positioned          You must specify a threshold with at least one of top  right  bottom  or left for sticky positioning to behave as expected  Otherwise  it will be indistinguishable from relative positioning      source  MDN    So in your example  you have to define the position where it should stick in the end by using the top property    x000D   x000D  html  body   x000D    height  200   x000D    x000D   x000D  nav   x000D    position  sticky  x000D    position  -webkit-sticky  x000D    top  0     required    x000D    x000D   x000D   nav-selections   x000D    text-transform  uppercase  x000D    letter-spacing  5px  x000D    font  18px  lato   sans-serif  x000D    display  inline-block  x000D    text-decoration  none  x000D    color  white  x000D    padding  18px  x000D    float  right  x000D    margin-left  50px  x000D    transition  1 5s  x000D    x000D   x000D   nav-selections hover   x000D    transition  1 5s  x000D    color  black  x000D    x000D   x000D  ul   x000D    background-color   B79b58  x000D    overflow  auto  x000D    x000D   x000D  li   x000D    list-style-type  none  x000D    x000D   lt nav gt  x000D     lt ul align  left  gt  x000D       lt li gt  lt a href    contact  class  nav-selections  style  margin-right 35px   gt Contact lt  a gt  lt  li gt  x000D       lt li gt  lt a href    about  class  nav-selections  gt About lt  a gt  lt  li gt  x000D       lt li gt  lt a href    products  class  nav-selections  gt Products lt  a gt  lt  li gt  x000D       lt li gt  lt a href     class  nav-selections  gt Home lt  a gt  lt  li gt  x000D     lt  ul gt  x000D   lt  nav gt  x000D   x000D   x000D

User · Answer

Few more things I ve come across  When your sticky element is a component  angular etc   If the  sticky  element itself is a component with a custom element-selector  such as an angular component named  lt app-menu-bar gt  you will need to add the following to the component s css     host   display  block           or use flexbox    or     app-menu-bar    display  block          in the containing component s css   Safari on iOS in particular seems to require  display block  even on the root element  app-root  of an angular application or it won t stick    If you are creating a component and defining the css inside the component  shadow DOM   encapsulated styles   make sure the position  sticky is being applied to the  outer  selector  eg  app-menu-bar in devtools should show the sticky position  and not a top level div within the component  With Angular  this can be achieved with the  host selector in the css for your component     host           position  sticky        display  block       this is the same as shown above       top  0        background  red             Other  If the element following your sticky element has a solid background  you must add the following to stop it from sliding underneath     sticky-element   z-index  100       parent-of-sticky-element   position  relative      Your sticky element must be before your content if using top and after it if using bottom   There are complications when using overflow  hidden on your wrapper element     in general it will kill the sticky element inside  Better explained in this question  Mobile browsers may disable sticky fixed positioned items when the onscreen keyboard is visible  I m not sure of the exact rules  does anybody ever know  but when the keyboard is visible you re looking at a sort of  window  into the window and you won t easily be able to get things to stick to the actual visible top of the screen   Make sure you have  position  sticky  and not display  sticky    Misc usability concerns  Be cautious if your design calls for for sticking things to the bottom of the screen on mobile devices  On iPhone X for instance they display a narrow line to indicate the swipe region  to get back to the homepage  - and elements inside this region aren t clickable  So if you stick something there be sure to test on iPhone X that users can activate it  A big  Buy Now  button is no good if people can t click it  If you re advertising on Facebook the webpage is displayed in a  webview  control within Facebook s mobile apps  Especially when displaying video  where your content begins in the bottom half of the screen only  - they often completely mess up sticky elements by putting your page within a scrollable viewport that actually allows your sticky elements to disappear off the top of the page  Be sure to test in the context of an actual ad and not just in the phone s browser or even Facebook s browser which can all behave differently

User · Answer

two answer here    remove overflow property from body tag set height  100  to the body to fix the problem with overflow-y  auto      min-height  100  not-working instead of height  100

User · Answer

if danday74 s fix doesn t work  check that the parent element has a height    In my case I had two childs  one floating left and one floating right   I wanted the right floating one to become sticky but had to add a  lt div style  clear  both   gt  lt  div gt  at the end of the parent  to give it height

[html] How does the "position: sticky;" property work?

Examples related to html

Examples related to css

Examples related to position

Examples related to css-position

Examples related to sticky