[Resolved] Question about fixed scrolling effect on a header or first row of page content

Home Forums Support [Resolved] Question about fixed scrolling effect on a header or first row of page content

Home Forums Support Question about fixed scrolling effect on a header or first row of page content

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #692958
    Adam

    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!

    #693094
    David
    Staff
    Customer Support

    Hi 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?

    #693805
    Adam

    Hi 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.

    https://imgur.com/a/sniTSJB

    Thank you.

    #693989
    David
    Staff
    Customer Support

    It looks like you have figured it out – or am i missing something?

    #695281
    Adam

    David,

    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.

    #695352
    David
    Staff
    Customer Support

    aah 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 class

    #702736
    Adam

    Hi 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!

    #702944
    David
    Staff
    Customer Support

    Thats great to hear and see! And thank you for the feedback.
    Glad i could be of help.

    #948599
    Adam

    Hey 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,

    #949127
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Can you try adding this CSS?:

    .fl-row:not(.sticky-row) {
        -webkit-transform: translate3d(0,0,0);
    }

    Let me know ๐Ÿ™‚

    #951665
    Adam

    Hey 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,

    #951917
    David
    Staff
    Customer Support

    Hi 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.

    #1127766
    Adam

    Thank you for your help David and for explaining that!

    #1128128
    David
    Staff
    Customer Support

    You’re welcome

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.