Fixed the footer on the bottom of the page


#1

Hi, I would like to know how to fix the footer at the bottom of the page.

This is an example:

If you scroll down, the footer will appear at the bottom, with 0px from it.

How can I do it on Hype?


(Freelancer) #2

you can’t fix the footer in hype without external code (with the setting below)

moreover you can’t add the code inside Hyde, you must edit also the piblished HTML file

take a look


#3

not sure if you need to there Michael :wink:

@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 calculation of the window’s inner height and the footer element’s height)

fixedFooter-vDBear.hype.zip (15.3 KB)


Stick Header to Top and Footer to Bottom
(Mark Hunte) #4

Similar to @DBear’s

Using the Hype setter API setElementProperty to set the footers top.
Also we can place the footer at the bottom of the scene where visually it shows us what it will look like when in Hype.
It will move from there and back when needed.

floatinFooter_MHv1.hype.zip (1.8 MB)


(Hans-Gerd ClaĂźen) #5

Hi @MarkHunte @DBear,

i guess you’ll need

if ((document.body.scrollTop || document.documentElement.scrollTop)...

to include ff too …

sunny day :slight_smile:


#6

I copied with anymation everyhting, I copied the javascript, but it doesn’t work…
:pensive:
I’m sure it’s my fault!


(Hans-Gerd ClaĂźen) #7

dear @riccardosuardi you’ve got to share your document … :slight_smile: or no one would be able to see something in his glass sphere :wink:


#8

You are right! :smiley:
It’s in Italian but what I need is named “footer fixed bottom”. That group should stay at the bottom of the page after scrolling a while… :slight_smile:
Also, the smooth scroll doesn’t work…
THANK YOU! DoveStudiare.hype.zip (3.0 MB)


(Hans-Gerd ClaĂźen) #9

hi,

well you have not attached any of solutions provided above (@DBear @MarkHunte ), so how should it workÂż

smoothscroling: you’ve attached a script to the resources, but you also have to run it on sceneload. This script determines location hashtag and will only work on 'a-href’tags (innerHTML)

Tip: you may instead use https://github.com/ramswaroop/animatescroll.js/ which works quite nice …


(Freelancer) #10

nice solution!. I would avoid javascript, the CSS is more friendly and easy to learn :slight_smile:

in any case this is a feature request, the fixed footer should be available as a standard without code.


#11

I didn’t because they didn’t work… Anyway thank you for everything :slight_smile:


#12

I’m sorry it didn’t work for you @riccardosuardi

I think you will have to study how to use Hype first. There are so many things that are wrong with your document I wouldn’t know where to start. My biggest advice to you is to not just copy and paste what you think are solutions to your problems. Most of the examples that are shared here in the forums are not necessarily suited to everyone’s projects. They are just a beginning to learn how to do something and very often they need adapting to your project.

After looking at your project there are so many things that are just copied in, it’s a jumble. I see you’ve put in the “sticky” solution from another post. You have put body and html tags inside the head HTML. You haven’t called any of the scripts, on Scene load for example. etc, etc.

Finally you didn’t actually use my example AT ALL! So of course it wouldn’t work.

This is an adaptation of your document (I have cleaned it up).

DoveStudiare-vDBear.hype.zip (2.9 MB)

This won’t always happen as it takes time that I cannot really spare at the moment.

The “sticky” footer happens when the “trigger” element (the COMO FUNCIONE element with id “trigger”) hits the scroll top (top of window) this moves the footer element and changes it’s display and positioning and plays the animation (again NO ANIMATION was done. I added this :slight_smile: )

Enjoy. Unfortunately I won’t be able to adapt any more. If you break you fix :wink:


#13

:slight_smile: my solutions is about 35-40 lines of code and all the user has to do is add id’s to the trigger and the footer and viola! I couldn’t make it more easier if i tried. :smiley: ok that last bit was a little white lie. Of course I could make it easier :laughing:


#14

What can I say? :pensive:
You’re right and you’re really nice to have done this for me… Like you said I have to learn hype first! And I will! :muscle:
Thank you for cleaned my project, this forum is really awesome!
Have a good day! You’re my Hype hero!!!


(Freelancer) #15

@DBear ,of course!
was not a criticism :slight_smile:

Hype lets you do things in different ways and this is the important thing, I love this software