Cómo agregar un espacio en blanco en Bootstrap hasta cierto elemento está en la parte superior de la pantalla?

Question 1

Tengo esta imagen en mi sitio web que en Bootstrap 4 y quieren tener la imagen en la parte superior de mi pantalla del usuario cuando ciertos botón o una imagen se hace clic en agregar un espacio en blanco para la parte inferior de la página web, por tanto la imagen es en la parte superior de la pantalla cuando mi sitio web se desplazan hacia abajo (que he descubierto con función JS). Cómo pueden añadir espacios en blanco para el sitio web hasta que la imagen está en la parte superior de la pantalla? He venido para arriba con una solución de la necesidad de un determinado elemento en CSS con los márgenes de las mediciones fijas y tenerlo visible cuando se hace clic, pero quiero que sea para diversos tamaños de las ventanas.

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>

Ejemplo de cómo quiero que mi sitio web. Este es mi código y queremos que así en CSS no tengo la medición fija de espacio, pero hasta que la imagen llega a la parte superior.

Question 2

Si lo que desea es la posición de su img para estar en la parte superior de la pantalla cuando se haga clic en un button entonces usted puede intentar el siguiente código:

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 usted no está familiarizado con las posiciones en css, entonces, sería mejor para que usted compruebe esta documentación.

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

Si lo que desea es la posición de su img para estar en la parte superior de la pantalla cuando se haga clic en un button entonces usted puede intentar el siguiente código:

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 usted no está familiarizado con las posiciones en css, entonces, sería mejor para que usted compruebe esta documentación.

Cómo agregar un espacio en blanco en Bootstrap hasta cierto elemento está en la parte superior de la pantalla?

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría