Обычно какое-то внятное использование ООП по прямому назначению можно увидеть у программистов, которые знакомы с шаблонами проектирования. По шаблонам есть специальные книги. В двух словах вам тут никто эту тему не растолкует. Это слишком большая тема.
Если форма так сильно завист от данных юзера, то можно эти данные фетчить в родительском компоненте и передавать в компонент-форму. В таком случае, форму можно показывать только после того как данные получены. Плюсом к такому подходу будет восможность переиспользовать форму где-то еще. Например, в админке.
Лучше решать такие штуки при помощи CSS. Например, используя position: sticky. Решения с добавлением/удалением классов по скроллу слишком нестабильны и подвержены ошибкам.
Если уж вас припёрло делать это на JS. То лучше найти какую-нибудь популярную библиотеку, в которой такие проблемы решены. Но в 21м веке JS для подобного уже не нужен, хватит и CSSa.
Там у вас с папкой public какая-то заморочка получилось. Она зачем-то копируется куда-то. Можно обойтись без этого. Я на этой неделе эксперементировал с конфигурацией вебпака и в итоге пришел вот к такой штуке: https://github.com/sneas/web-component-typescript-... . Это не 100% то что вы пытаетесь достичь, но там присутствует идея, почёрпнутая из проекта create-react-app:
