Hide / Show button on scroll?

[divinedh]

Hello,

I have found something from this support forum that is similar to what i want to achieve for my website.

I have a small contact button that sticks to a bottom of right side on my site and I would like to hide/show this sticky button on certain area or scroll position.
For example, the button is hidden on where hero image is and menu area (top of page) and it becomes active after it passes those area (rest of page, except top).

It doesnt really have to be related to scroll position. As long as, i can hide it at the top and show it after the top like back to top button, im okay.

I have applied code i found from this forum doesnt work as i wanted. It shows the button when scroll down and hide the button when scroll up.

Example i found on the forum : https://theme.co/apex/forum/t/hide-menu-after-scrolling-and-appear-on-scroll-up/11411
Code i applied : http://jsfiddle.net/L37oh35v/
My site : https://divinedh.net

[christopher]

Hi there,

Please consider that our theme does not have such a feature out of the box and this is a customization request which is outside of our support scope.

We will do our best to help you out on this matter but we will not guarantee a 100% work or maintenance of the code if it breaks in the future updates of the theme. For that, you will need to hire a developer.

In the code that you used there is a line of code like this:

	var lastScrollTop = 0;

The 0 in the code means the top of the page. Now you can change that to, for example 200 which will show the pixels below the top of the page. Play with that value to find the best threshold for your case.

Thank you.

[divinedh]

Oh, i didnt know that this is out of your support. I thought its okay to ask here as i found another support regarding jquery on this forum.

Your advise gave me an idea that i could look for another code to apply to my site. Thank you.

Now, Im not sure if this is too much to ask but another jquery codes that i applied to my site works as i want it to do. However, it works fine and visible on cornerstone live preview but it remains hidden on actual website on IE, Chorme. To be honest with you, im not sure if the button is hidden or jquery is not working. Its really weird that it works 100% fine on cornerstone live preview but not on web browsers.
Would you be able to have a look my code and tell me if i miss something?

I have put those in GLOBAL CSS and GLOBA JAVASCRIPT.

Here is updated codes : http://jsfiddle.net/L37oh35v/4/

[Alaa]

Hi divinedh,

I suggest replacing your code with this one and it should work:

jQuery(window).scroll(function() {
  var $el = jQuery('.caldera-forms-modal');
  
  if(jQuery(this).scrollTop() >= 200) $el.addClass('shown');
  else $el.removeClass('shown');
});

Thanks.

[divinedh]

Thank you. It works finally! Thnk you very much!!

---

For those of you who want to have a side sticky button that is hidden at the top but visible after scroll down, these are the codes i used.

< div class=“caldera-forms-modal”>< i class=“x-icon x-icon-envelope” data-x-icon=“” style=“font-size:20px”> contact< /div>

CSS

/** caldera modal button **/
.caldera-forms-modal {
visibility: hidden;
color: white;
background-color: #d65b5b ;
border: 1px solid #d65b5b;
border-radius: 5px 0px 0px 5px;
height: 40px;
width: 150px; !imporatnt;
position: fixed;
z-index: 9999;
float: right;
right: -104px;
bottom: 2%;
transition: right 0.3s;
}

.caldera-forms-modal:hover {
right: 0%;
}

.caldera-forms-modal.shown {
visibility: visible; !important;
}
/** end **/

Jquery

/** javascript, jquery for caldera modal button **/
jQuery(window).scroll(function() {
var $el = jQuery(’.caldera-forms-modal’);

if(jQuery(this).scrollTop() >= 200) $el.addClass(‘shown’);
else $el.removeClass(‘shown’);
});
/** end **/

[christian]

You’re welcome. Glad we could help.