में स्क्रॉल का पालन करता है। आप HTML में ऑब्जेक्ट की तरह टूलबार कैसे बनाते हैं जो उपयोगकर्ता की स्क्रॉल का पालन करता है ताकि यह हमेशा देखने योग्य पृष्ठ के शीर्ष पर हो?वेबपृष्ठ पर स्थिर टूलबार बनाएं जो HTML
अग्रिम धन्यवाद!
सीएसएस
.selector
{
position: fixed;
top: 0;
left: 0;
width: 100%;
}
एचटीएमएल
<div class="selector">
... content for bar here ...
</div>
क्या आपको विशेष रूप से स्क्रॉल (एनिमेट) या केवल स्थिर (टूलबार जैसी) ऑब्जेक्ट करने की आवश्यकता है?
संपादित करें:
ठीक है तो एक स्थिर (उपकरण पट्टी) की तरह वस्तु चौड़ाई पेज के 100% है जो है, और 25px कहते हैं की ऊंचाई को जोड़ने के लिए, यदि आप ऐसा करते हैं।
एचटीएमएल
<div id="toolbar">
<p>Some content...</p>
</div>
सीएसएस
#toolbar {
position: fixed;
width: 100%;
height: 25px;
top: 0;
left: 0;
padding: 5px 10px; /* some styling, please note overall height of the object will be 35px due to 5px padding on top/bottom. */
background: #ccc; /* some styling */
border-bottom: 1px solid #333; /* some styling */
}
कृपया ध्यान दें कि यह आपके पेज के शीर्ष पर है कि किसी भी सामग्री को ओवरलैप सकता है, इसलिए पुश करने के लिए एक शीर्ष मार्जिन का उपयोग टूलबार के नीचे या बस सेट करें:
body {
margin-top: 35px;
}
स्थिर (टूलबार जैसे) –
मुझे दूसरा जवाब नहीं मिला - डबल पोस्ट के लिए खेद है। – Marko
यह ठीक है, आपका जवाब मार्जिन के साथ मेरी मदद करता है हालांकि इसके लिए धन्यवाद! –
यहाँ एक विचार है। लेकिन इस कार्य पट्टी नीचे स्थित है ताकि आप position: fixed;
<html>
<head>
<title>
home - windows vista v 1.0
</title>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
display: block;
bottom:100%;
}
</style>
<style>
#toolbar {
bottom: 100%;
width: 100%;
height: 25px;
top: 0;
left: 0;
padding: 5px 10px; /* some styling, please note overall height of the object will be 35px due to 5px padding on top/bottom. */
background: #ccc; /* some styling */
border-bottom: 1px solid #333; /* some styling */
}
</style>
</head>
<body bgcolor="lime">
<a href="vista bogroom.html"><img src="bogroom logo.jpg" alt="" height="50" width="60"></a><br>
<a href="vista mac welcome.html"><img src="mac welcome img.jpg" alt="" height="50" width="60"></a><br>
<a href="vista mac search load.html"><img src="search button.jpg" alt="" height="50" width="60"></a><br>
<a href="vista command prompt.html"><img src="CMD img.jpg" alt="" height="50" width="60"></a><br>
<a href="vista itunes.html"><img src="itunes.jpg" width="60" height="50"></a><br>
<a href="vista ie.html"><img src="ie logo.jpg" width="60" height="50"></a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="selector">
<div class="dropdown">
<span><img src="start button vista.png" width="50" height="50"></span>
<div class="dropdown-content">
<h1>Liam</h1>
<p>
<a href="vista bogroom.html"><img src="bogroom logo.jpg" alt="" height="50" width="60"></a><br>
<a href="vista mac welcome.html"><img src="mac welcome img.jpg" alt="" height="50" width="60"></a><br>
<a href="vista mac search load.html"><img src="search button.jpg" alt="" height="50" width="60"></a><br>
<a href="vista command prompt.html"><img src="CMD img.jpg" alt="" height="50" width="60"></a><br>
<a href="vista itunes.html"><img src="itunes.jpg" width="60" height="50"></a><br>
<a href="vista ie.html"><img src="ie logo.jpg" width="60" height="50"></a>
</p>
</div>
</div>
</div>
</html>
</body>
</html>साथ bottom: 100%; की जगह वहाँ लापता छवियों के एक जोड़े ताकि आप क्या चाहते हैं के साथ उन की जगह सुनिश्चित करें।
आशा है कि आपको कोड पसंद आए! (कोड एचटीएमएल में मेरे विंडोज़ विस्टा प्रोग्राम पर होम पेज के लिए है, मैं काम कर रहा हूं।)
इसके नीचे इस ब्लॉक सामग्री नहीं होगी? –