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.
scrollingElement = (document.scrollingElement || document.body);
function scrollSmoothToBottom (id) {
$(scrollingElement).animate({
scrollTop: document.body.scrollHeight
}, 500);
}
window.onload = function(){
// Make WhiteSpace not on website
document.getElementById("whiteSpace").style.display = "none";
document.getElementById("submitButton").addEventListener("click",function(){
// Once Button is clicked make whitespace visible then scroll to bottom
document.getElementById("whiteSpace").style.display = "block";
scrollSmoothToBottom ();
});
}.space{
margin:520px;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<center>
<h1 id = "collegeNameTitle">Name</h1>
<h3>Student Size</h3>
<span class="badge badge-success even-larger-badge" id = "collegeStudentSizeText">10</span>
<h3>Acceptance Rate:</h3>
<span class="badge badge-success even-larger-badge" id = "collegeAcceptanceRateText">10</span>
<h3>Student-Faculty Ratio:</h3><span class="badge badge-success even-larger-badge" id = "collegeRatioText">10</span>
</center>
<center><button id = "submitButton"><img class = "collegeImage"src="sample.png" id = "collegeImage"></button></center>
<div id = "whiteSpace" class ="space" visibility = "hidden">
</div>Example of how I want my website to be. This is my code right now and want it so in CSS I have no fixed measurement of space but until the image reaches to the top.
CodePudding user response：
If you just want the position of your img to be at the top of your screen when you click on a button then you can try the code below:
const theImg = document.getElementById("myImg");
const theBtn = document.getElementById("myBtn");
theBtn.addEventListener("click", function(){
theImg.style.position="fixed";
theImg.style.top=0;
});body{
height: 100vh;
display: flex;
flex-direction: column;
align-item: center;
justify-content: center;
}
img{
height: 5rem;
width: 100%;
}<button id="myBtn">Button</button>
<img id="myImg" src="https://www.w3schools.com/css/paris.jpg">If you're not familiar with positions in css then, it'd be best for you to check this documentation.
CodePudding user response：
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.