Scroll Header Menu when scrolling upwards handling css w/o keyframes if possible

[codeispoetry]

.pheader {
	z-index: 999;
	top: -100px;
	transition: all 1s;
}

.pheader.active {
	position: sticky;
	top: 0px;
	margin:auto;
	border-bottom: 1px solid #DCDCDC;    
}

Above is a snippet from a html where as I scroll up the header menu gets sticky after JS adds a class active. I was avoiding keyframe animaton so I used above, but

When the menu disappears the disappearnece is not smooth(appearence is smooth), but spontaneous. Is there a way to get this done w/o using keyframes?

[PaulOB]

@codeispoetry

When the menu disappears the disappearnece is not smooth

I assume that you are talking about after the menu has been shown once and then it hides again?

If so the reason there is no transition is because there is nothing to transition. When you remove the active class there is no position:sticky so top:-100px does nothing at all. If you want a transition back upwards then you will need to have a position:sticky by default.

e.g.

.pheader {
z-index: 999;
position: -webkit-sticky;/* ios needs this*/ 
position: sticky; 
top: -100px;
transition: all 1s;
background:red;
padding:20px
}

Now the element will scroll smoothly back to top:-100px.

You would of course need to check that top:100px is taller than the header or you will see the header. It’s probably best if you update that 100px value dynamically with js unless you are certain 100px is enough although rem or em would be better than px.

[codeispoetry]

Sir, If parent flex has 3 child it is possible that If I have given gap property then gap property should not apply between first two childs?

[PaulOB]

If I understand correctly then no you can’t omit the gap on one set of elements. You’ll have to use margin instead and then not apply it where you don’t need it.

If you had a small test case demo it might be easier to suggest something else but I’m guessing margins may be the answer.

[codeispoetry]

I got the point instead of making this too complicated I changes some HTML structure and implemented your proposed solution.

@PaulOB

Now the element will scroll smoothly back to top:-100px.

You would of course need to check that top:100px is taller than the header or you will see the header. It’s probably best if you update that 100px value dynamically with js unless you are certain 100px is enough although rem or em would be better than px.

[Archibald]

@codeispoetry

Sir, If parent flex has 3 child it is possible that If I have given gap property then gap property should not apply between first two childs?

One way may be to put the first two children in a <div> wrapper so the <div> wrapper becomes the first child of the original parent. The <div> can be flex with no gap. The third child then becomes the second child of the original parent (with a gap). I’m not sure if that’s any better than using margins.

[codeispoetry]

@Archibald

One way may be to put the first two children in a <div> wrapper so the <div> wrapper becomes the first child of the original parent. The <div> can be flex with no gap. The third child then becomes the second child of the original parent (with a gap). I’m not sure if that’s any better than using margins.

That was creating issue in the solution proposed by @PaulOB