Why is my CSS Sticky Header working intermittently-CodePudding

I have implemented a CSS-based sticky header using CSS like

nav {
    position: sticky; top: 0;
}

I implemented it just find this page in edcint.co.nz/public/data/scenery (copy and paste this link otherwise it will load a blank page)

But in a related page, that uses a lot of the same code and css (same lazy loading and infinite scroll), the header seems to come and go as you scroll down the page. Once you reach the bottom of page (lazy loading and infinite scroll are in play here - but same as on the page that works ok), then the header works ok. Intermittent Page Sample

I can't work out why it does not work. None of the parent items have overflow set etc

Any ideas?

CodePudding user response：

It works but its z-index is small so you should increase it :

nav {
    position: sticky; 
    top: 0;
    z-index: 100;
}

CodePudding user response：

It is because you are floating the single results:

.single_result {
    float: left;
}

You are better off removing that attribute and setting the results container to grid or flex so that the layout of these elements is determined there and the elements are not taken out of general flow of the page.

.results {
display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max-content, 300px));
}