[TUTORIAL] Hiding your Popup widget on scroll

Pro Tips Elfsight Widgets Tips
1

I got a cool code for you guys! I noticed the popup widget has the trigger option to enable the popup, but no option to disable after scroll. Thankfully, the popup widget provides custom javascript.

On your popup widget, go to the custom JS section and paste the following:

let height = Math.round($(document).height() * 50 / 100);
$(document).scroll(function() {
  let y = $(this).scrollTop();
  if (y > height) {
    $('.ewiaVt').hide();
  } else {
    $('.ewiaVt').show();
  }
});

Now, the class name “.ewiaV” might be different for you. Unfortunately that is something i will not be able to explain step by step. HOWEVER! I can find it for you, just post the link where the pop up form is.

The “50” on that code is the page percentage. So you can change it to “10” for example and it will hide after 10% of the page has been scrolled.

That’s pretty much it, hoping they can add the trigger function for hiding the form. thanks for reading!

If your still confused, just reach out i will help you.

6 Likes
2

This is absolutely awesome, @Lesan, thanks a million for sharing! :heart_eyes:

I hope it will come in handy for a lot of users :slight_smile:

1 Like
3

Yes, of course, if there are any more useful tips that benefit me along the way, I will make sure to share. :blush:

2 Likes
4

Looking forward to seeing more insights from you, @Lesan! :slight_smile:

1 Like