How can I make a button disappear when scrolling my landing page

SOLVE
Highlighted
Regular Contributor

Hi Good Morning

 

I would like to know how can I make to desappear a button like this (I atthached a screenshot ) when scrolling in my page and when I return appear again?

 

I remain to your comments.

Regards cta down.PNG

 

 

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Solution
Regular Advisor

Hi Janette.

 

You can use JavaScript or jQuery to show or hide an element. For example, if you have an "arrow" class, you can use jQuery's scroll(), fadeIn() and fadeOut() functions like this:

 

$(window).scroll(function() {
    if ($(this).scrollTop()> 20) {
        $('.arrow').fadeOut();
     }
    else {
      $('.arrow').fadeIn();
     }
 });

 

Here's an example of how this works. 


Stephanie O'Gay Garcia
HubSpot Design / Development / Automation
Website | Contact

View solution in original post

Reply
0 Upvotes
3 Replies 3
Highlighted
Regular Contributor
Reply
0 Upvotes
Highlighted
Solution
Regular Advisor

Hi Janette.

 

You can use JavaScript or jQuery to show or hide an element. For example, if you have an "arrow" class, you can use jQuery's scroll(), fadeIn() and fadeOut() functions like this:

 

$(window).scroll(function() {
    if ($(this).scrollTop()> 20) {
        $('.arrow').fadeOut();
     }
    else {
      $('.arrow').fadeIn();
     }
 });

 

Here's an example of how this works. 


Stephanie O'Gay Garcia
HubSpot Design / Development / Automation
Website | Contact

View solution in original post

Reply
0 Upvotes
Highlighted
Regular Contributor

Thanks for the information I´m going to try with this solution.

 

Regards

 

Reply
0 Upvotes