Stick Header to Top and Footer to Bottom

[MartinJRR]

I am looking for a solution that helps me to have my header and footer to stick at the top/bottom on a scrollable site.

In detail: I want the Logo to stick in the top, even scrolling the page, as well as I want the footer (which in this case contains the navigation) to stick at the bottom, also even when scrolling.

Is this possible?

Sorry, I am not a coder and basically use Hype graphically, so I don’t know anything about coding.

Thanks in advance,
Martin

[JimScott]

Sorry but I do not know of a way to accomplish your request "natively" just using Hype's interface unless You have the body of your page in a scrollable field element in Hype - not the same effect as I believe You are looking for.

However - why not start somewhere with some Javascript/CSS solutions and see how You do. The "fixed" header part should be pretty accessible even without coding knowledge:

Creating a Fixed Header Image

I am trying to create a fixed image for the header of a website, but I am not finding a CSS hack that has worked within Hype yet. To see what I mean, view the image at the top of this page and scroll down: http://guitarjo.com/ Any ideas on how to target images within Hype to create this effect?

Scrolling content in middle with header and footer

Not sure how to easily explain this easily. See this page I am working on http://www.chenevertphotography.com/cu/ As you see when you drag the bottom of the page up it hides the content in the middle behind the header and footer. That would be fine if that content was then scrollable. Unfortunately that content is just lost until you resize the window. I know if I turn height scaling off I can scroll but I the it seems I can’t lock the footer to the bottom. The https://www.google.com home page …

Fixed the footer on the bottom of the page

not sure if you need to there Michael @riccardosuardi This is an option using a scroll listener on scene load. Basically, it looks for the difference between the window’s top and a specific trigger element’s top value (could be a number instead) and when they meet it fires the timeline (that is a simple reveal up of the footer elements) and also via javascript sets the style attributes “fixed” and “translateY” which enables the grouped footer element to stay fixed to the bottom. (a cal…

[bboyink (Brad Boyink)]

MartinJRR

I created a sample project that will show you how to snap a header and footer as a browser window is resized. You can download it with the link below:

www.geekmytree.com/sample.zip

Hope this help.

[MartinJRR]

Hello Brad, and thanks a lot for taking the effort to answer me.

Unfortunately your solution is not what I am looking for. I need both, the header and the footer to stick at the edges when not usig 100% scale.

Hope someone can help me.

Thanks,
Martin

[MartinJRR]

Thanks JimScott,

I will have a closer look to what you sent me here.

Best,
Martin

[bboyink (Brad Boyink)]

Is these what you are looking to do? If so, the example I gave you only needs a simple modification. Let me know and I can change it to show you how I did it.

[MartinJRR]

This is the behaviour I am looking for:

https://senkabrankovic.wixsite.com/senka/veroeffentlichungen

[MarkHunte]

Is the whole site made with Hype as a scene or are the header and footer added to an existing site?

[MartinJRR]

Are you talking about the link?

[MarkHunte]

No,

I am talking about what you are building.

[MartinJRR]

First of all thanks for answering

Well, the plan is to have everything within one scene … I am guessing it is needed to use some sort of scripting for all this, hm?

[MarkHunte]

css,

Have you search the forum, I am sure there are example already…

[MartinJRR]

I searched but I am not experienced enough to find the right content. Sorry.

[MarkHunte]

Just noticed that @JimScott 's first example link may have what you need using css and fixed position.