Comment faire pour ajouter de l'espace dans le Bootstrap jusqu'à ce que l'élément est sur le haut de l'écran?

Question 1

J'ai cette image sur mon site que dans le Bootstrap 4 et que vous voulez avoir l'image sur le dessus de mon utilisateur de l'écran lorsque le bouton de certaines ou de l'image est cliquée par l'ajout d'un espace blanc au bas de la page web, par conséquent, l'image est en haut de l'écran lorsque mon site est défiler tout le chemin vers le bas (que j'ai compris avec le JS de la fonction). Comment pouvez continuer à ajouter des espaces de site web jusqu'à ce que l'image est en haut de l'écran? Je suis venu avec une solution d'avoir un certain élément en CSS avec les marges de mesures fixes et de les avoir quand on clique dessus, mais qu'elle soit pour les différentes tailles de fenêtres.

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>

Exemple de la façon dont je veux que mon site soit. C'est mon code maintenant et veulent il donc dans le CSS je n'ai pas de mesure fixe de l'espace, mais jusqu'à ce que l'image atteint le sommet.

Question 2

Si vous voulez juste la position de votre img pour être en haut de votre écran lorsque vous cliquez sur un button ensuite, vous pouvez essayer le code ci-dessous:

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">

Si vous n'êtes pas familier avec les positions dans le css, alors, il serait préférable pour vous de vérifier cette documentation.

Yong Pin · Answer 1 · 2021-11-24T01:05:47

Si vous voulez juste la position de votre img pour être en haut de votre écran lorsque vous cliquez sur un button ensuite, vous pouvez essayer le code ci-dessous:

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">

Si vous n'êtes pas familier avec les positions dans le css, alors, il serait préférable pour vous de vérifier cette documentation.

Comment faire pour ajouter de l'espace dans le Bootstrap jusqu'à ce que l'élément est sur le haut de l'écran?

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie