कैसे जोड़ने के लिए सफेद अंतरिक्ष में बूटस्ट्रैप जब तक निश्चित तत्व है, स्क्रीन के शीर्ष पर?

Question 1

मैं इस छवि पर मेरी वेबसाइट है कि बूटस्ट्रैप में 4 और चाहता है करने के लिए छवि के शीर्ष पर होना मेरे उपयोगकर्ता की स्क्रीन पर कुछ बटन या छवि क्लिक किया जाता है जोड़ने के द्वारा सफेद अंतरिक्ष के नीचे करने के लिए वेबसाइट इसलिए छवि के शीर्ष पर है जब स्क्रीन अपनी वेबसाइट स्क्रोल जाता है सभी तरह से नीचे (जो मैं समझ से बाहर के साथ जे एस समारोह). कैसे रख सकते हैं जोड़ने के खाली स्थान के लिए वेबसाइट तक छवि स्क्रीन के शीर्ष पर? मैं एक समाधान के साथ आने के लिए होने में एक निश्चित तत्व सीएसएस के साथ मार्जिन तय की माप है और यह दिख रहा है जब क्लिक किया, लेकिन यह चाहते हैं के लिए हो सकता है के विभिन्न आकार व्यूपोर्ट.

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>

उदाहरण के कैसे मैं मेरी वेबसाइट के लिए । यह मेरा कोड सही है और अब यह चाहते हैं, तो सीएसएस में मैं कोई निश्चित माप की जगह है, लेकिन जब तक छवि के शीर्ष पर पहुंचता है.

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

यदि आप कर रहे हैं के साथ परिचित नहीं पदों में सीएसएस फिर, यह होगा सबसे अच्छा आप के लिए जाँच करने के लिए इस दस्तावेज़.

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

यदि आप कर रहे हैं के साथ परिचित नहीं पदों में सीएसएस फिर, यह होगा सबसे अच्छा आप के लिए जाँच करने के लिए इस दस्तावेज़.

कैसे जोड़ने के लिए सफेद अंतरिक्ष में बूटस्ट्रैप जब तक निश्चित तत्व है, स्क्रीन के शीर्ष पर?

सवाल

सबसे अच्छा जवाब

अन्य भाषाओं में

यह पृष्ठ अन्य भाषाओं में है

इस श्रेणी में लोकप्रिय

लोकप्रिय सवाल इस श्रेणी में