Recommand · November 24, 2021 0

How to add white space in Bootstrap until certain element is on top of screen?

I have this image on my website that in Bootstrap 4 and want to have the image be on top of my user’s screen when certain button or image is clicked by adding white space to the bottom of the website therefore the image is at the top screen when my website is scrolled all the way down (which I have figured out with JS function). How can keep adding whitespace to website until the image is on top of the screen? I have come up with a solution of having a certain element in CSS with the margins fixed measurements and have it visible when clicked but want it be for various sizes of viewports.

As I understand it, you want your image to appear moving up on the screen while scrolling down

In this case I understand that your screen already has an initial size larger than the image… Or does the image occupy the entire screen when the page loads? I would like more specs like images or a clear idea of what you want to do

And regardless of being bootstrap 4 or not. This is just a daring CSS, you need a custom JS… So make a script and call the file on your page. But forget about adding white space. This doesn’t seem to make sense to me.

Watch these videos to see if you’re inspired to work.

video 1
video 2