Belirli bir öğe ekranın üstünde olana kadar Önyüklemede boşluk nasıl eklenir?

Question 1

Web sitemde Bootstrap 4'te bulunan bu görüntüye sahibim ve web sitesinin altına beyaz boşluk ekleyerek belirli bir düğme veya görüntü tıklandığında görüntünün kullanıcı ekranımın üstünde olmasını istiyorum, bu nedenle web sitem kaydırıldığında görüntü üst ekrandadır. tüm yol aşağı (JS işleviyle anladım). Görüntü ekranın üst kısmına gelene kadar web sitesine boşluk eklemeye nasıl devam edebilirim? Kenar boşlukları sabit ölçümlerle css'de belirli bir öğeye sahip olmanın bir çözümünü buldum ve tıklandığında görünür olmasını sağladım, ancak çeşitli boyutlarda görünümler için olmasını istiyorum.

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>

Web sitemin nasıl olmasını istediğime bir örnek. Bu şu anda benim kodum ve css'de sabit bir alan ölçümüm yok, ancak görüntü en üste ulaşana kadar istiyorum.

Question 2

Eğer sadece pozisyonunu istiyorsan img bir düğmeye tıkladığınızda ekranınızın en üstünde olmak için button ardından aşağıdaki kodu deneyebilirsiniz:

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

Css'deki konumlara aşina değilseniz, bu belgeleri kontrol etmeniz en iyisi olacaktır.

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

Eğer sadece pozisyonunu istiyorsan img bir düğmeye tıkladığınızda ekranınızın en üstünde olmak için button ardından aşağıdaki kodu deneyebilirsiniz:

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

Css'deki konumlara aşina değilseniz, bu belgeleri kontrol etmeniz en iyisi olacaktır.

Belirli bir öğe ekranın üstünde olana kadar Önyüklemede boşluk nasıl eklenir?

Soru

En iyi cevabı

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride