Position fixed detail issue 🤔


#1

I have an issue with CSS fixed position. It’s just a detail but still.

When I have an image set in CSS to position:fixed; it should stick on the same place when scrolling. This works fine for me in Hype. But when I’m on the top of website and swipe even further up, the image is covered with the background and doesn’t move. But the image should behave differently. It should move and it shouldn’t be covered with the background.

Any suggestions how to fix this?
example.hype.zip (769.2 KB)


#2

@Matus

I am not understanding your logic or your description’s details.

When I have an image set in CSS to position:fixed; it should stick on the same place when scrolling… (snip)
But the image should behave differently. It should move and it shouldn’t be covered with the background.

If the image is set in the CSS to “fixed” why would You expect it to move?

What “background” is covering it? I just see the “Text” field moving over it - which is the behavior I would expect as the image is fixed.


#3

@JimScott
I don’t expect the image to move. Sorry for misunderstanding :slight_smile:

Look at the navigation in here for example. It’s fixed.
When you’re on very top of the page, try to swipe up.
The navigation won’t move and won’t be covered with anything else.

Hovewer, if you swipe up in the Hype document I attached, the background,
which is in this case white will overlay part of the image.

I’m asking why, and how to fix this. It’s just a detail, I know.


#4

Let’s see if I got the situation right!

The elements (could be images - I’ve used Hype’s graphic primitives) scroll underneath the menu bar (dark grey at top). The menubar is the top element in the timeline layer list. As far as I understand this mimics the Apple page You linked to.

Hype Project: Scroll_Fixed Header.hype.zip (24.0 KB)


(Greg) #5

I’m not sure Jim, but I think he might be referring to the ‘Elastic Scrolling’ in OS X…

But the sample website has the navigation menu header that stays put even with the elastic scrolling.


#6

Ahhhh! Thank You Greg - that might be the ticket!


#7

@gasspence @JimScott
Yes, that elastic scrolling might be what I’m looking for.
I tried the suggestions in that thread, but found none which would solve my problem.

Also, I noticed that the issue I described appear only in Safari.
Thanks for your help though.


#8

Also @JimScott, this is what I meant specifically.
Look at the fixed bar at the top of the page as I scroll in the video.


#9

That remedy did not work for me either. I do not have an answer for You. I think a search in the wild using “iOS+disable+elastic+scrolling” would be your next step as no one else has answered.