Ukryj przewijaną treść za przezroczystymi pozycjami div podczas przewijania strony?

Question

Mam div nazwie nagłówka, który jest ustawiony ze stałą pozycję. Problem polega na tym, że przewijam stronę, zawartość strony wyświetla się za nagłówkiem (nagłówek jest przezroczysty).

Wiem dużo na temat css, ale nie mogę wymyślić tego. Próbowałem ustawić przepełnienie do ukrytego, ale wiedziałem, że to nie zadziała (i tak nie było).

Bardzo trudno to wytłumaczyć, więc zrobiłem, co mogłem najlepiej.

html:

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

css:

#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; 
} 

Oto zrzut ekranu z problemem:

Answer 1

Prawdopodobnie szuka z-index. Pozwala określić pionową kolejność elementów na stronie, dzięki czemu element z z-index: 10 unoszą się nad (wizualnie) elementem z z-index: 5.

Podaj zawartość z-index: 5 i sprawdź, czy działa.

Answer 2

Czy #header ma ustawioną wysokość?

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

Dość pewien, że to nie działa w IE mimo ...

Answer 3

miałem podobny problem i znalazł rozwiązanie dla mojego przypadku. Powinno to być stosowane bez względu na to, czy używasz pełnego obrazu tła, czy jednolitego koloru (w tym białego).

HTML

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

CSS

#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; 
} 

To daje mi wygląd obrazu w pełnym widoku z przezroczystym stałej nagłówka i kiedy przewija zawartość ciała, to kryje się za cel. Obrazy wydają się płynne.

Można zrobić to samo z jednolitym kolorem tła, choć prawdopodobnie byłoby łatwiej.

2 notatki: nagłówek ma ustawioną wysokość, testowałem tylko w FF i Chrome.

Answer 4

Właśnie przychodzimy do tego późno, ale na wypadek, gdyby ktoś inny przeszedł to w przyszłości, oto twoja poprawka.

Twój kod CSS:

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

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

Twój HTML:

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

To zapewni Ci nagłówku że gładko dopasowuje swoją stronę, a pływa na szczycie. Główna treść zostanie przewinięta bez nagłówka i zniknie po przejściu przez nagłówek. Twoja górna warstwa obwolutna powinna być wysokością zawartości opakowania nagłówka.

Pozdrawiam!

Answer 5

Napraw pozycję div zawartości pod nagłówkiem + przepełnienie-y div zawartości.

Answer 6

1. Mam ustalony obraz tła
2. Nagłówek Tło jest przejrzysty
3. Nie chcę moje treści, aby zastąpić mój przezroczysty nagłówek

wymyśliłem rozwiązanie przewijanie div zamiast ciało:

<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

Myślę, że jest późno na odpowiedź. Ale później, ktoś spojrzy, to będzie pomocne.

Wystarczy dodać tło do nagłówka klasa

Oto kod ->

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