Progress bar

  • 18 October 2017
  • 6 replies
  • 28 views
K

I would love to implement a progress bar on one of my landing pages https://www.screencast.com/t/BfmmfLi7akG
Does any know how I can do this?

Thanks a bunch

6 replies

Jess
Rank
Userlevel 7
Badge +1

Hey!

Just before I throw a bunch of code at you, can you tell me what you’re wanting to implement the progress bar on? If it’s a multi-step form, I’ve got something I can share with you.

If it’s something else, I’ll have to dig a bit further to find something else.

I’ll keep an eye out for your response 🙂

K

Hey Jess,

Thanks for your response. I would say it’s more of a page scroll progress bar. It’s something similar to that these guys have. https://rockboost.com/en-us/

Am I being clear or still sound confusing? 🙃

Thank you!!!

Jess
Rank
Userlevel 7
Badge +1

Oooooh I like that!

Okay so the script I have won’t work for that, but I’m going to see what I can dig up to achieve that.

I’ll keep you posted!

F

Could you please share the script for the multi-step progress bar?

D

@Jess Would you mind sharing the script for a progress bar to be used in a multi-step form? Thanks in advance!

happyagencies
Userlevel 3
Badge +1

Hi @kent_rng,

I think you could simply use the same snippet we used here for this landing page. The concept is the same, you will just need to have the navbar position fixed at the left. (Beware that you will still need to code a little bit here)

Try it:
https://www.6cmarketing.com/previous-work/unbounce/cameo-getbooked/

Screenshot_188

Instructions:

1. Design that floating navbar
2. Place this snippet before the body end tag

<script>
  $(document).ready(function() {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop();
    
    var page1Top = $("#lp-pom-box-420").offset().top;
    var page2Top = $("#lp-pom-box-421").offset().top;
    var page3Top = $("#lp-pom-box-422").offset().top;
    var page4Top = $("#lp-pom-box-423").offset().top;

    if (scrollPos >= page1Top && scrollPos < page2Top) {
      $("#lp-pom-button-415").addClass("active");
      $("#lp-pom-box-483").fadeIn();      
    } else {
      $("#lp-pom-button-415").removeClass("active");
      $("#lp-pom-box-483").fadeOut();
    }

    if (scrollPos >= page2Top && scrollPos < page3Top) {
      $("#lp-pom-button-416").addClass("active");
      $("#lp-pom-box-485").fadeIn();
    } else {
      $("#lp-pom-button-416").removeClass("active");
      $("#lp-pom-box-485").fadeOut();
    }
    
    if (scrollPos >= page3Top && scrollPos < page4Top) {
      $("#lp-pom-button-417").addClass("active");
      $("#lp-pom-box-486").fadeIn();
    } else {
      $("#lp-pom-button-417").removeClass("active");
      $("#lp-pom-box-486").fadeOut();
      
    }
    
     if (scrollPos >= page4Top) {
      $("#lp-pom-button-418").addClass("active");
      $("#lp-pom-box-487").fadeIn();
    } else {
      $("#lp-pom-button-418").removeClass("active");
      $("#lp-pom-box-487").fadeOut();
      
    }

  });
});
</script>

3. Make sure to change the #ids for the ones you have in your new navbar.

www.unbouncedesign.com

Reply


Terms & ConditionsCookie settings