पेज स्क्रॉल करते समय पारदर्शी निश्चित स्थिति divs के पीछे स्क्रॉल करने योग्य सामग्री छुपाएं?

Question

मेरे पास हेडर नामक एक div है जो एक निश्चित स्थिति के साथ स्थापित है। समस्या तब होती है जब मैं पृष्ठ को स्क्रॉल करता हूं पृष्ठ की सामग्री शीर्षलेख के पीछे दिखाई देती है (हेडर पारदर्शी है)।

मुझे सीएसएस के बारे में बहुत कुछ पता है, लेकिन ऐसा लगता है कि यह एक नहीं है। मैंने छिपे हुए ओवरफ्लो को सेट करने का प्रयास किया है, लेकिन मुझे पता था कि यह काम नहीं करेगा (और ऐसा नहीं हुआ)।

यह समझाना बहुत मुश्किल है, इसलिए मैंने सबसे अच्छा किया।

एचटीएमएल:

<div id="header"> 
    <div id="topmenu">Home | Find Feeds | Subscriptions</div> 
</div> 
<div id="container"> 
    <div id="content"> 
     testing 
    </div> 
</div> 

सीएसएस:

#header { 
    margin:0 auto; 
    position: fixed; 
    width:100%; 
    z-index:1000; 
} 
#topmenu { 
    background-color:#0000FF; 
    height:24px; 
    filter: alpha(opacity=50); 
    opacity: 0.5; 
} 

#leftlinks { 
    padding: 4px; 
    padding-left: 10px; 
    float: left; 
} 

#rightlinks { 
    padding: 4px; 
    padding-right: 10px; 
    float: right; 
} 

#containerfixedtop { 
    width: 100%; 
    height: 20px; 
} 

#contentfixedtop { 
    margin: 0 auto; 
    background-color: #DAA520; 
    width: 960px; 
    height:20px; 
} 

#container { 
    position: relative; 
    top: 68px; 
    width: 100%; 
    height: 2000px; 
    overflow: auto; 
} 

#content { 
    margin: 0 auto; 
    background-color: #DAA520; 
    width: 960px; 
    height: 2000px; 
} 

यहाँ समस्या का स्क्रीनशॉट है:

Answer 1

आप शायद z-index के लिए देख रहे हैं। यह आपको पृष्ठ पर तत्वों के लंबवत क्रम को निर्दिष्ट करने की अनुमति देता है, इसलिए z-index: 10 वाला तत्व z-index: 5 के साथ एक तत्व (दृश्यमान) ऊपर तैर रहा है।

सामग्री z-index: 5 दें और देखें कि यह काम करता है या नहीं।

Answer 2

#header एक सेट ऊंचाई है?

#header {position: fixed; height: 100px; } 
#container {position: absolute; top: 100px; bottom: 0; overflow: auto; } 

सुंदर यकीन है कि यह आईई हालांकि में काम नहीं होता ...

Answer 3

मैं एक ऐसी ही समस्या आ रहा था, और मेरे मामले के लिए एक समाधान मिल गया। यह लागू होना चाहिए कि आप एक पूर्ण स्क्रीन पृष्ठभूमि छवि, या एक ठोस रंग (सफेद सहित) का उपयोग कर रहे हैं।

एचटीएमएल

<div id="full-size-background"></div> 
<div id="header"> 
    <p>Some text that should be fixed to the top</p> 
</div> 
<div id="body-text"> 
    <p>Some text that should be scrollable</p> 
</div> 

सीएसएस

#full-size-background { 
z-index:-1; 
background-image:url(image.jpg); 
background-position:fixed; 
position:fixed; 
top:0px; 
left:0px; 
width:100%; 
height:100%; 
} 
#header { 
position:fixed; 
background-image:url(image.jpg); 
height:150px; 
width:100%; 
} 
#body-text { 
margin-top:150px; 
} 

यह मैं एक पारदर्शी तय हैडर और जब शरीर सामग्री स्क्रॉल, यह हैडर के पीछे छुपाता साथ एक पूरा पृष्ठ छवि के प्राप्त होती है। छवियों निर्बाध दिखाई देते हैं।

आप एक ठोस रंग पृष्ठभूमि के साथ एक ही काम कर सकते हैं, हालांकि, तर्कसंगत रूप से, यह आसान होता।

2 नोट्स: हेडर की एक सेट ऊंचाई है, मैंने केवल एफएफ और क्रोम में परीक्षण किया है।

Answer 4

बस इस देर से आ रहा है, लेकिन यदि भविष्य में कोई और इस पर चलता है, तो यह आपका फिक्स है।

आपका सीएसएस कोड:

.wrapper { 
    width:100%; 
    position:fixed; 
    z-index:10; 
    background:inherit; 
} 

.bottom-wrapper { 
    width:100%; 
    padding-top:92px; 
    z-index:5; 
    overflow:auto; 
} 

आपका HTML:

<div class="wrapper"> 
    ...your header here... 
</div> 
<div class="bottom-wrapper"> 
    ...your main content here... 
</div> 

यह एक ऐसा हेडर सफाई से अपनी साइट से मेल खाता है, और शीर्ष पर तैरता के साथ प्रदान करेगा। मुख्य सामग्री हेडर से मुक्त हो जाएगी, और जब यह हेडर पास करेगी तो गायब हो जाएगी। आपका .bottom-wrapper पैडिंग-टॉप आपके हेडर रैपर की सामग्री की ऊंचाई होना चाहिए।

चीयर्स!

Answer 5

शीर्षलेख + ओवरफ्लो-वाई सामग्री div के नीचे सामग्री div की स्थिति को ठीक करें।

Answer 6

1. मैं तय कर दी है पृष्ठभूमि छवि
2. हैडर पृष्ठभूमि पारदर्शी है
3. मैं अपने पारदर्शी हैडर ओवरराइड करने के लिए

मैं एक समाधान div स्क्रॉल बजाय के साथ आया था मेरी सामग्री नहीं करना चाहते शरीर:

<div> 
    <div class="header"></div> 
    <div class="content"></div> 
</div> 


.header { position: fixed; ... } 
.content { position: fixed; height: calc(100% - HEADER_HEIGHT); overflow: scroll; } 

Answer 7

मुझे लगता है कि यह उत्तर देने में देर हो चुकी है। लेकिन बाद में, किसी को यह देखने में मदद मिलेगी कि यह सहायक होगा। >

#header { 
 
    margin:0 auto; 
 
    position: fixed; 
 
    width:100%; 
 
    z-index:999; 
 
    background-color:#FFFFFF; 
 
} 
 
#topmenu { 
 
    background-color:#0000FF; 
 
    height:24px; 
 
    filter: alpha(opacity=50); 
 
    opacity: 0.5; 
 
    
 
} 
 

 
#container { 
 
    position: relative; 
 
    top: 68px; 
 
    width: 100%; 
 
    height: 2000px; 
 
    overflow: auto; 
 
    z-index:1; 
 
} 
 

 
#content { 
 
    margin: 0 auto; 
 
    background-color: #DAA520; 
 
    width: 960px; 
 
    height: 2000px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 

 
<body> 
 

 
<div id="header"> 
 
    <div id="topmenu">Home | Find Feeds | Subscriptions</div> 
 
</div> 
 
<div id="container"> 
 
    <div id="content"> 
 
     testing 
 
    </div> 
 
</div> 
 
</body> 
 
</html>