Sunday, March 8, 2020

notes to self: building a slide down nav bar thingy

I wonder if I'm kicking against the sticks, generally still shunning using prefab CSS stuff, like the descendents of boostrap, and handcoding HTML and CSS. Definitely it makes mobile not a lot of fun.

So I was trying to make a site with a navbar roughly modeled after

One challenge for both href-# as well as javascript Element.scrollIntoView() solutions is the navbar itself will block the top of the content- has a pseudo-element work around for that... showed me the basic of javascript scroll listeners (with debounce) - I don't quite get why it thinks different behavior for scrolling up vs scrolling down is good, but it showed me what I needed for a simple "if scrolling more than X distance from top of page, show the navbar" - of course I could have just made it fixed in place if I didn't mind it always there, or there's that cool display: sticky; setting if I had nav that looked good in the middle of the page as well.

Finally, I was noticing console warnings until I used passive:true on the scroll addEventListener (and of course my scrollIntoView had behavior:smooth because I am such a smooth guy.)

Man. That's kind of a lot!

No comments:

Post a Comment