를 추가하는 방법에 공백 스트랩까지 특정 요소가에서 최고의 화면?

Question 1

저는 이 이미지에 웹 사이트에서 부트스트랩 4 원하는 이미지의 상단에있는 내용의 화면을 때 버튼 또는 특정 이미지를 클릭하여 추가 공백을 아래의 웹 사이트 따라서 이미지는 화면 상단에 내 웹 사이트 스크롤 모든 방법은 아래(내가 생각 JS 능). 어떻게 유지할 수 있는 추가 공백을 때까지 웹사이트 이미지가에서 최고의 화면? 저는 솔루션으로 올라와의 특정 요소에서 CSS 와 마진을 고정 측정하고 표시할 때 클릭 하지만 그것을 위해 다양한 크기의 뷰포트.

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>

예를 들어 내가 어떻게 원하는 나의 웹사이트됩니다. 이 코드는 지금 그것을 원하도록에서 CSS 가 고정된 측량 공간의 그러나 이미지에 도달한다.

Question 2

원하는 경우에는 위치의 당신 img 야에서 최고의 화면을 클릭하면 button 다음을 시도할 수 있습니다 아래 코드:

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 로 그런 다음,최고의 것을 확인 이 문서.

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

원하는 경우에는 위치의 당신 img 야에서 최고의 화면을 클릭하면 button 다음을 시도할 수 있습니다 아래 코드:

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 로 그런 다음,최고의 것을 확인 이 문서.

를 추가하는 방법에 공백 스트랩까지 특정 요소가에서 최고의 화면?

질문

최고의 응답

다른 언어로

이 페이지는 다른 언어로되어 있습니다

이 카테고리에서 인기

인기 있는 질문에 이 카테고리