Header 'Bottom Section' show on scroll

Support
#1

So I am trying to have a call button follow the page in the bottom right hand corner of page, but only show up after you scroll down, in the same way the top header shows up or disappears when scrolling down the page so it does not get in the way of the hero header section like shown in the the photo attached.

#2

Hey There,
​
​To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
Thank you.

#3

Secure note created. The call button is in the header builder in the bottom section, only visible on the 3 largest screen widths. Thank you.

#4

Hi There,

Thank you for the credentials. Bottom header, unlike top header doesn’t have hide initial settings or delayed options available. I think the best option to achieve what you want is to use Convertplus Infobar. See this sample:
https://www.convertplug.com/plus/demos/info-bar-bottom/.

Hope this helps.

#5

So there is no javascript to load it once user gets 25% down the page? Like a scroll to top button? Or is there a way to trick the scroll to top button into being a tel: link?

#6

Hi,

It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

#7

Hey,
Thanks for the help. I figured maybe there was an easy way around it. Guess I will try and teach myself something new!

#8

Looks like I found a solution:

I gave the button a class: .headercall

Then in the global css I had it initially hidden by:

.headercall{
  display:none;
}

And finally I added this javascript into the global javascript: (Depending on when you want to show the button, you can change the percentage. Also you can change the number in the show and hide functions for different intervals to your liking)

var available;
var percentage_of_page;
var half_screen;
var height;

$(window).scroll(function (e) {
    available = $(document).height();
    percentage_of_page = 0.05;
    half_screen = available * percentage_of_page;
    height = $(window).scrollTop();
    if ( height > half_screen ) {
        $('.headercall').show(400);
    } else {
        $('.headercall').hide(400);
    }
});
#9

Thanks for sharing the solution!

#10

Of course! I did find out that using the $(window)… by itself can cause errors, so the best practice is to put the code inside of a function like this:

jQuery(function($) {

var available;
var percentage_of_page;
var half_screen;
var height;

$(window).scroll(function (e) {
    available = $(document).height();
    percentage_of_page = 0.05;
    half_screen = available * percentage_of_page;
    height = $(window).scrollTop();
    if ( height > half_screen ) {
        $('.headercall').show(400);
    } else {
        $('.headercall').hide(400);
    }
});

});

Thanks to @alexander for this suggestion from this thread: https://theme.co/apex/forum/t/custom-javascript-only-works-on-homepage/25766?u=mattkutz

#11

Great, glad you sorted things out,

Have a nice day :slight_smile:

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.