How a publicity div will appear when the paragraph visible on the screen

Hello,
I want to display publicity div when the paragraph visible on the screen (page). I tried with css visibility, with jquery is(":visible") however I couldn’t get a solution.
Can anyone give me a solution or suggestion?
Thanks

You would need a Javascript function that detect scroll and scroll position for that.

Usually those are called scrollspy, i bet you could find many examples.
for instance here’s bootstrap’s one:

thanks for your response. I tried but i couldn’t get that what i want.
See this link: https://codepen.io/fdfd/pen/QWjLQNa
In this link, when you scroll down, you will see a div with violet color and then the paragraph. My goal is the div(violet color) will appear only when the paragraph is visible on the screen. Otherwise the div has to be hide.
If you understand my idea, can you give an example with the existing code? Thanks

You can use the IntersectionObserver API.


Some Youtube videos.


Quick example pen
https://codepen.io/lasjorg/pen/YzyKJEW

@lasjorg thank you for your response.
I checked your code in codepen.io but the div(violet) is not visible when I scrolled and not sticky also. I tried to change the opacity, but i couldn’t arrive on the one what i want.
Is it works for you?

You didn’t say anything about it having to be sticky. But that’s like two lines of CSS, I updated the pen.

And yes it works for me. What browser are you on, IE does not support IntersectionObserver.

1 Like

@lasjorg
Thanks a lot.
You solved my problem. Good job
Thanks again