Como adicionar espaço em branco no Bootstrap até determinado elemento está no topo da tela?

Question 1

Eu tenho essa imagem no meu site que em Bootstrap 4 e quer ter a imagem de estar no topo da minha tela do usuário quando determinado botão ou imagem é clicada por adicionar espaço em branco para a parte inferior do site, portanto, a imagem está no topo da tela quando o meu site é percorrido todo o caminho para baixo (o que eu descobri com JS função). Como pode continuar a adicionar espaço em branco para o site até que a imagem esteja no topo da tela? Eu vim com uma solução de necessidade de um determinado elemento em CSS com as margens fixas de medições e de tê-lo visível quando clicado, mas quer ser para vários tamanhos de 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>

Exemplo de como eu quero que meu site. Este é o meu código de direito agora e por isso no CSS eu não tenho fixo de medida de espaço, mas até que a imagem chega ao topo.

Question 2

Se você quer apenas a posição de sua img para estar no topo da sua tela quando você clica em um button em seguida, você pode tentar o código abaixo:

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

Se você não estiver familiarizado com posições em css, então, seria melhor para que você verifique esta documentação.

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

Se você quer apenas a posição de sua img para estar no topo da sua tela quando você clica em um button em seguida, você pode tentar o código abaixo:

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

Se você não estiver familiarizado com posições em css, então, seria melhor para que você verifique esta documentação.

Como adicionar espaço em branco no Bootstrap até determinado elemento está no topo da tela?

Pergunta

Melhor resposta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria