Reusable Element's Group's out of focus?

Questions
1

I’m not quite sure how to word this issue but please bare with me.

I’m trying to build a one page web app. I’m making progress figuring out how to do this through reusable elements along with hiding and showing groups as a substitute for pages.

Right now I have a Reusable Element that is a Footer. The groups, substituting for pages, are positioned above the footer by setting negative Y axis values. The footer is made into a FloatingGroup at the bottom of the Index page. Whenever a button in the footer is clicked, it shows one group and hides the rest to create the experience of moving between pages.

Here are the issues that I’m having;

  1. When a group is visible the whole group is not visible on laptop or desktop. It’s cut off.
  2. When a group is visible, you cannot scroll up or down the page to see what is cut off.
  3. When a group is visible, the scroll starts at the bottom of the page and is inverted.
  4. Sometimes, after a page reset or after selecting a new group to show, the footer rises higher.

Since I thought it was an issue with placing the groups above the footer, I tested out making the footer a header and placing the groups under it, like how a normal page would look. The same things happened.

Any ideas on where I’m going wrong be greatly appreciated.

Thanks,