[0.99] Navbar fixes in event&contentpage

[Ciel-exe]

"trigger-top number undefined The distance px to top of target to trigger top affix. (if not set, use top prop)"
"top number undefined The css top property after trigger top affix. (if not set, use trigger-top prop)"
(https://www.naiveui.com/en-US/dark/components/affix)
What could have happened here is that you specified only one and the other was set to the same value, which caused the issue. I modified the top value to reflect what i did on my console but i'm not sure if this will really work as intended as i have no proof of testing

[050644zf]

Ah yeah, now i recalled what was going on before.

I was trying to make navbar's width met the width of content. However, once i scroll down and triggered the affix effect, the width of the nav bar will be shrunk. So it looks weird when it's attached to the top. I failed to fixed the width issue and choose to leave there a blank only to make it look better.

[Ciel-exe]

I honestly like how the navbar is small. I now know it's unintended but if that was big as the whole width of the page it would look kinda oppressive, this way is cleaner in my eyes.

[050644zf]

I honestly like how the navbar is small. I now know it's unintended but if that was big as the whole width of the page it would look kinda oppressive, this way is cleaner in my eyes.

i mean not the whole page, but the text area.

[050644zf]

so the actual problem is when you scroll down the page and triggered the affix, the width suddenly shrunk which is not i expected. I hope the navbar can keep it's width

[Ciel-exe]

I see
I was even able to replicate the error by setting the width to webkit fill available space or something like that.
So, basically you wanted the arrow to reach the border shown here between blue and orange-ish?

[050644zf]

I see
I was even able to replicate the error by setting the width to webkit fill available space or something like that.
So, basically you wanted the arrow to reach the border shown here between blue and orange-ish?

exactly

[Ciel-exe]

It makes sense that by adding position: fixed the width shrinks tho, cause it's no more relative to the previous parent. I'll play around a bit and see if i can find solutions to that

[Ciel-exe]

I know that may not sound the cleanest solution to you, but i forced my correction by editing these lines on these elements:

Only thing left to do is programmatically check if the parent element has the class of "n-affix--affixed" to change only in that case the value of max-width to 45% and setting it back to normal (100%) when it doesn't have the said class.
I only changed the max-width value in the second image.