How to Create Sticky CTA Bar?

Questions
1

Hi, I am a new user and want to recreate my landing page from another platform here in Divhunt.

One thing that I have not been able to figure out is how to go about creating a Sticky Call To Action Bar that appears after scrolling a certain amount, complete with a proper button, logo and close button. I would basically like it to be exactly how I have it on the site I am trying to replicate here and would like to learn how to create this in Divhunt without coding it in a text editor.

Here is an example of exactly what I am trying to create:
https://videoshare.nextlevelbros.com/conversations/d15bb9f8-c11b-5677-a40f-ee6fdb92085a

Any help would be appreciated. Assume you are talking someone who knows nothing about Divhunt as this will be my first project in here. Thanks.

-Alexander

2

Hi @nextlevelbros

This would be easily achievable once we introduce Divhunt interaction system which is currently in development.

But as for now, there are other solutions to do this, one is custom code, and second one is plugins.

As you mentioned you are not interested into custom code, let’s do this one with plugins then.

  1. Go to Admin panel > Browse Plugins
  2. Find Show on Scroll plugin and install, might take like 5-10 sec, just wait.
  3. Build that sticky element and make it position: fixed on top, so it’s always visible

image
image2872Ă—1022 188 KB

  1. Set transform on sticky holder, in my case it’s Div, it’s the one that has position fixed on it.

    image
    image2868Ă—954 192 KB

  2. Set the % value, so when your sticky section will appear, like after user has scrolled more than 20%

  3. Test it, go to live website and see if sticky is being shown after % scrolled.

  4. If you want to hide sticky section insider builder, so it doesn’t get in your web, just configure Visibility to Hidden
    image

Hopefully this is clear enough, if not, I can provide video for you.

2 Likes
3

Here’s short video, sorry for quality, I am not the right person for tutorials but I am trying to help :slight_smile:

1 Like
4

Thanks a lot for the quick response Dejan, much appreciated. Being able to get help without days passing by is something that is important to a lot of us users, so that bodes well for the future of Divhunt.

I am not crazy about having the amount of scrolling to show the sticky bar as a percentage, I prefer a pixel value, so I guess I will go ahead and custom code it this time.

Good to know that the interaction system will provide a better way to do this in the future, I will look out for that.

1 Like
5

@nextlevelbros

No problem, we understand that with software like Divhunt, people will need our help to learn and understand certain things, so we will make sure that we always be there to help.

I’ve added option for pixels too.
If you have installed plugin, reinstall it (uninstall then install) to get latest updates.

image

So you can choose pixels or percent.

I can add more options to plugin if needed, like option to close sticky on click or similar.

2 Likes
6

Thats amazing, thanks a lot!

If you saw the video I included in my post, I plan on having a button that links to a form, as well as a close button.

You mention the posibility of adding the option to close sticky on click, but I am not sure how that would work for the setup I am envisoning because my sticky bar will not not clickable for the most part, except for the exact area of the cta button and close button, so the option to close the bar when clicking anywhere on the bar is not a feature I am looking for, perhaps other people though… unless I have misunderstood your offer for the close click.

1 Like
7

Hi
Is there anyway to control the speed of the object set to show on scroll? The transition is very abrupt and I noticed that show on scroll - collapses the section - if i set the pixels to too small a value - the section beneath appear before the scroll reaches the set pixel.

Perhaps a “fade in” on scroll would be a better implementation.

1 Like