Home › Forums › Support › Question about fixed scrolling effect on a header or first row of page content
- This topic has 13 replies, 3 voices, and was last updated 4 years, 2 months ago by David.
-
AuthorPosts
-
October 3, 2018 at 7:39 pm #692958Adam
Hello.
I am trying to replicate that fixed scroll effect that happens to the first row of content when the user scrolls down, on this avada theme website.
I would like the lower content of the page to scroll upwards over the first row/header on the page when the user scrolls down. I know that the parallax effect can be used on a background image, like this example explains. But I want it to include the entire content of the row or header with its text, not just the background image. What would the best way be to accomplish this?
Should I be using the generate press elements and a page hero with some custom CSS? Or can I just have the same effect on the first row of the page content? I am using the beaver builder page builder with the generate press theme.
Thank you for any advice you can offer!
October 4, 2018 at 1:54 am #693094DavidStaffCustomer SupportHi there,
so you want the top section with content and the site header to remain fixed in place so the content below it scrolls over the top?
October 4, 2018 at 6:35 pm #693805AdamHi David,
Yes I would like to have the first row of content to stay in place(not sure if I can do this with a section/row in a pagebuilder or if it has to be a separate pagehero/header) so that the content below scrolls over it. I attached 3 imgur images here to show what I am wanting in action.
Thank you.
October 5, 2018 at 2:59 am #693989DavidStaffCustomer SupportIt looks like you have figured it out – or am i missing something?
October 7, 2018 at 1:17 am #695281AdamDavid,
The working examples I am showing are from the currently live site using the Avada theme. I am trying to replicate this scroll effect using the generatepress theme and beaver pagebuilder. I am just looking for any advice on the best way to do so. I am not sure how it is achieved exactly.
I have only been able to have the background fixed, not sure how to have that fixed scroll affect on the actual text/content of the top row/header page hero.
Thank you.
October 7, 2018 at 5:05 am #695352DavidStaffCustomer Supportaah ok – sorry didn’t look closely.
It will vary depending on the page / HTML setup, but some CSS like this:.stuck-element { position: -webkit-sticky; position: sticky; top: 0; z-index: -1; }
Just give the element you want to stick the
.stuck-element
classOctober 16, 2018 at 8:33 pm #702736AdamHi David,
The rebuilt site using generatepress is now live.
So I tried applying that css and class to the first row using the beaver builder page builder but it wasn’t working. I imagine it would work better if I was using the generate press page hero element, but I was hoping to make it work within the page builder. So then I tried targeting the row specifically using the google web inspector, beaver builder gives each of its rows parent class names that are a random string of letters/numbers. That managed to target the proper area, then I just needed to tweak the z-index to 0 and ensure that the rows below had solid color backgrounds so the sticky element does not show through any gaps.
Now its working great! ๐
I might ask the beaver builder support as to why I couldn’t make this happen by applying the class name to the row within the pagebuilder.
Thanks a lot for your help David!
October 17, 2018 at 3:04 am #702944DavidStaffCustomer SupportThats great to hear and see! And thank you for the feedback.
Glad i could be of help.July 4, 2019 at 2:03 am #948599AdamHey David,
It came to my attention that something is wrong with the above CSS as the fixed scrolling effect does not work on Safari. I don’t have a Mac so unfortunately I didn’t learn about it until now but I can see that the content below the header disappears behind the header on scroll instead of staying on top. Only in safari though, all the other browsers seem fine. Any ideas as to why? I looked online and it sounded like
position: -webkit-sticky;
would work on safari so I am not sure what is wrong.
You can see it happening on this webpage
Thank you,July 4, 2019 at 11:01 am #949127TomLead DeveloperLead DeveloperHi there,
Can you try adding this CSS?:
.fl-row:not(.sticky-row) { -webkit-transform: translate3d(0,0,0); }
Let me know ๐
July 8, 2019 at 12:08 am #951665AdamHey Tom,
That fixed the issue! Can you explain that CSS? Is
-webkit-transform: translate3d(0,0,0);
applied to everything but the .sticky-row content? Is this a fix to erroneous CSS or is just an issue with Safari and this is the best way to overcome that?Reading more about transform: translate3d(0,0,0) it sounds like you are forcing the GPU to make the fixed scrolling effect to take place. So perhaps my original CSS is fine but the Safari browser was having trouble keeping up with it so that’s why it was glitching out? I don’t have safari but by using crossbrowsertesting website the issue did seem more like a glitch then the affect not happening at all, in that I was able to have the content sometimes appear/sometimes not and not smoothly by any means.
Thanks a lot,
July 8, 2019 at 7:04 am #951917DavidStaffCustomer SupportHi there,
it is a Safari bug – the position sticky throws the z-indexing out of implied order placing it above any other child elements within the same container.
The code Tom provided fixes that as well forcing the devices GPU to manage scrolling effects for potentially better scrolling performance.
Alternative:
use the original CSS i provided with the negative z-index and then change the Customizer > Colors > Content –> Background color to transparent.
January 10, 2020 at 6:11 am #1127766AdamThank you for your help David and for explaining that!
January 10, 2020 at 10:29 am #1128128DavidStaffCustomer SupportYou’re welcome
-
AuthorPosts
- You must be logged in to reply to this topic.