search

MrSpiffyClean / covidtrends

Tracking the growth of COVID-19 Cases worldwide
https://aatishb.com/covidtrends/
MIT License
0 stars 0 forks source link

Aside scroll fix #13

Open MrSpiffyClean opened 4 years ago

MrSpiffyClean commented 4 years ago

steps to fix.

  1. encapsulate top of countries (i.e. search bar, buttons) in a div
  2. give position sticky and top to said div
  3. check for issues
  4. optional, give return to start labels to parameters and countries title
MrSpiffyClean commented 4 years ago

remember to include webkit vendor prefixes on css

MrSpiffyClean commented 4 years ago

In order to make my idea of having the titles be fixed while scrolling two things have to be done. The first is to have the Customize title out of the div containing stuff, such that it isn't on the parent div of the countrieswrapper. The second is specifying the top positions for both elements, which can break stuff eventually because of hardcoding values.

MrSpiffyClean commented 4 years ago

Afterwards, programming the titles as a way to get to the top, with https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView for instance

MrSpiffyClean commented 4 years ago

Odd artifact when scrolling, the div seems less big than it should, probably a rounding issue due to 0.1 rem.

MrSpiffyClean commented 4 years ago

only vendor prefix I think exists is position: -webkit-sticky; putting it here when github stops bugging out.

MrSpiffyClean commented 4 years ago

last thing to look at is the wide margin/padding the spacer has and the pixel issue with the scroll-to-top.

MrSpiffyClean commented 4 years ago

Final issues before pull request:

Accessibility issues: