Want to make your prototype more realistic in just a few seconds? Fixed headers, footers and scrolling is a great way to make that happen in a couple of clicks.
How to add a fixed header or footer
Fixed (or sticky) headers and footers are areas of your screen which remain static, while you scroll the rest of your screen. They're useful for things like tab bars or navigation headers.
Follow these simple steps:
- Open Marvel Editor by clicking on any of your images
- Slide the 'fixed header' and 'fixed footer' bars, located on the left hand side of the image
- You can choose any length of header or footer for either one - the pixel (px) indicator on the right hand side of the image, level with the bar, shows how many pixels from the top or bottom the fixed area will be.
How to make a design scroll
Marvel automatically scrolls any long designs you upload so you don't need to do a thing 🎉
If you're importing your screens, your prototype will automatically scroll if the length of the screen is longer than the viewport of the device you're viewing it on. We have a guide to the correct screen sizes for your device here.
If you're using our Design Tool to create your screens, learn how to change your screen size here.
Note: we don't currently support horizontal scrolling but if its something you want, get voting here.
Keep scroll position
The 'keep scroll position' feature allows you to set-up a hotspot on one screen, and have the destination screen load at the exact same scroll position as the user was on the previous screen. This is a great tool for creating chat and messaging prototypes, where the conversation often loads at the bottom of each screen.
- Select any image in your project and click edit
- Once the editor opens, click and drag anywhere on the image to draw a hotspot
- In the image selector pop up, select a destination screen > then select the Keep scroll position on the left
- Hit close to save your changes
- When you play your prototype and click on the hotspot, it'll keep the same scroll position as it transitions to the next screen.