Pinning to bottom of screen

Elements
1

How can I responsively pin a button to the bottom of the screen e.g. 50 px from bottom right and 20 px from bottom ? I tried all the combinations of pin and scaling but when i resize the window in Chrome or Safari, the button near the bottom does not move up and gets cut out.

BD1 copy.zip|attachment](upload://iDgPCIMywEr5OJYrA7oUIwVRY6A.zip) (16.2 KB)

2

The link to your Demo is faulty… :bomb:

3

Sorry about that!

BD1 copy.zip (16.2 KB)

4

So what You really want to do is “stick” an element (button, rect, etc.) at a particular place in the window when it is resized or scrolled - is this correct? If so this is different than a responsive environment - but does employ aspects of a flexible layout.

Checkout the red ellipse which I have centered and set 50 px above the bottom of the page no matter the scroll or window resize… is this the type of expression You are looking for?

sticky element - bottomPin_JHSv2.hype.zip (23.6 KB)

Live Demo here.

2 Likes
5

Thank you Jim!!!

I found your approach better than many others on the forum.

Building on your approach, I simplified it a bit for anyone else with the same problem – although I am pinning an object to the top of the page in my example.

In this example you can move the NavBar object wherever you want on the page. I also used a trick of making the main group a 1 pixel wide but full page long line so that it does not cover any other objects that may be underneath it.

Object fixed on scrolling page.zip (29.6 KB)

6

Hmm.. maybe I am misunderstanding but not sure I would say it was simplified, from what I can see it's just the removal of bottom pinning done by

 .screen-bottom {
    		bottom: 50px;
    	}

Which is what you wanted?.

Removing it and placing the fixed element onto the responsive scene without it will likely be hit and miss if it even shows up when viewed in the browser depending on where you place it and other setup factors.

You can set the groups pointer-events to ignore pointer-events in it's Action inspector.
That way you should not need to do this trick (huh hum ... one we all probably did when first using hype.. :stuck_out_tongue_winking_eye:)

7

Hey Mark,

Thanks so much for the notes.

Yes, I have not tested this in a responsive layout, so you are probably right!

Very handy tip -- thank you!

Hyper