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 porchfestquincy.org.
One challenge for both href-# as well as javascript Element.scrollIntoView() solutions is the navbar itself will block the top of the content-
css-tricks.com/hash-tag-links-padding/ has a pseudo-element work around for that...
dev.to/changoman/showhide-element-on-scroll-w-vanilla-js-3odm 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