Home>

html - position: sticky element that follows scroll does not work

The following sites
Where
When it becomes a smartphone size, a reserved is displayed in the header part.


        
            
                <p><span>Ota Medical Mall Dental</span><i></i>Reservations/Inquiries</p>
            
        
    


I want to follow this when scrolling,
The following site
https://www.miso.blog/css-position-sticky/

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

I added this to CSS and HTML, but it is not reflected.
I am using Mac OS 10.13.6 Chrome to issue developer tools and check on the smartphone screen.

I don't know what is causing it, so please let me know.

html css html5
  • Answer # 1

    sticky is fixed in the parent element.
    In the case of a question, since the height of the parent element is not specified, it becomes the same as the sticky element,
    Even if you scroll, it will scroll with the parent element.

    If you set the height of the parent element as shown below, it will be fixed even if the parent element scrolls.

    . sticky {
    postion: -webkit-sticky;
    position: sticky;
    top: 0;
}
.smapho-show {
    height: 1200px;
}

    If you want to fix regardless of the parent element, specifyposition: fixed;.

    I think the following explanation about sticky is cheap.
    position: sticky;explains how it works and how to use it | Collis

Related articles